时间戳

首页 > 解决方案 > 如何在服务仍在获取响应时显示进度条

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

问题描述

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

 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>

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

标签： htmlcssangular

解决方案

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

加载微调器

例如：在 ts 中：

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

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

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

在 HTML 中

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

对不起我糟糕的英语，但我希望这会对你有所帮助。:)

推荐阅读