html - 如何在服务仍在获取响应时显示进度条

Question

我有一个模态，我希望在服务调用获取模态显示数据时显示一个进度条。但在这种情况下，首先获取进度条，然后获取模态，这使得进度条显示在模态下方。如何解决这个问题？

 this.service.searchMembers(memSearchJson).subscribe((response: any) => {
// some function
}

<modal id="custom-modal-2">
      <div class="modal">

          </div>
          <div id="memberSearchBar" class="class-hide">
              <mat-spinner></mat-spinner>
              Finding Member IDs..
        </div>
  </modal>

如果在服务调用之前调用 document.getElementById("memberSearchBar").className = 'loading-div';，它会抛出错误，因为 className 为 null。我应该在哪里调用它以在模态上显示进度条？

Answer 1

如上所述，我建议使用 *ngIf。为了更好地理解，我添加了指向完美教程的链接。

Loading spinner

例如:在 ts:

   showSpinner: boolean = true;
  ngOnInit() {
    this.spinnerShow();
}

如果您需要在从服务中获取数据之前显示微调器。

 spinnerShow(){
    this.workflowService.getData().subscribe(()=> 
   this.showSpinner = false);
  }

在 HTML 中

<div *ngIf="showSpinner"></div>

抱歉我的英语很糟糕，但我希望这对你有所帮助。 :)