Question

我正在使用Angular版本8编写一个应用程序，该应用程序向用户返回来自不同API的许多响应。
该应用程序一次调用多个API以获取响应。我需要一个加载符号，一旦它们得到响应，它们就会停止。
它们的时间从几秒钟到一分钟不等。我该如何实现这样的东西？

Answer 1

检查我在stackblitz上制作的以下示例：link
我要做的是设置一个角形材料微调器和一个标签，可以在我的太阳穴中放置API结果：

<button (click)="onFetch()" >Click me to send request</button>
<mat-spinner *ngIf="spin"></mat-spinner>
<p *ngIf="!spin">{{result}}</p>

按钮仅用于将请求激发到API。
正如您在模板中看到的那样，我在微调器和结果标签上设置了一个ngIf，以显示微调器或结果。
之后，我通过单击按钮发出请求，单击按钮后，将执行onFetch函数，该函数由于this.spin = true而使微调框可见。

  onFetch() {
    this.spin = true
    ajax.getJSON(this.url)
    .pipe(
      delay(1000)
    )
    .subscribe(json => {
      this.spin = false
      this.result = json.value
    })
  }

请求返回结果后，就会执行this.spin = false并且微调框不再可见。

一次调用多个API时如何显示加载屏幕？

1 个答案: