如何在Angular和bootstrap中显示加载器，直到结果准备就绪

Question

我正在调用一个API，它需要几秒钟才能获得响应：

   this.http.get(`http://localhost:44301/consentinitiation/${this.qid}`)
    .pipe(retryWhen(_ => {
    return interval(1000)
    }))
   .subscribe(result => {result
   this.qrcodelink=result["qrCodeLink"];
    this.isDisplayed=true;
     })

在我的HTML组件上，我有一个qrcode，它正在加载：

    <div *ngIf="isDisplayed">
        <qr-code [value]="qrcodelink"  ></qr-code>  
      </div>

我需要把加载器放在这里，我找到了引导加载器标签

  <div class="spinner-border text-primary" role="status">
 <span class="sr-only">Loading...</span>
 </div>

我怎么使用它？

Answer 1

为什么不使用isDisplayed字段来显示加载：

<div *ngIf="!isDisplayed" class="spinner-border text-primary" role="status">
 <span class="sr-only">Loading...</span>
</div>

也可以在使用tap进行新呼叫时重置显示

this.http
  .get(`http://localhost:44301/consentinitiation/${this.qid}`)
  .pipe(
    retryWhen((_) => interval(1000)),
    tap(() => (this.isDisplayed = false)),
  )
  .subscribe((result) => {
    this.qrcodelink = result['qrCodeLink'];
    this.isDisplayed = true;
  });

Answer 2

在等待服务器响应时显示微调器。

使用bootstrap，很容易创建一个占据整个页面而不显示其他元素的旋转器。您可以像这样尝试：

​

<div *ngIf="!isDisplayed"
  class="position-fixed w-100 h-100 d-flex align-items-center justify-content-center bg-white spinner-overlay">
  <div class=" text-center">
    <div class="spinner-border mb-1 text-primary" role="status"></div>
  </div>
</div>

​

除了spinner overlay之外，这些都是bootstrap类，它的作用仅仅是设置z-index属性。

​

.spinner-overlay {
    z-index: 2000;
}

​

获得服务器响应后，只需设置this.isDisplayed = true；