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

您可以利用Angular的document.getElementById("memberSearchBar").className = 'loading-div'和*ngIf来代替[class.class-name]="expression"

尝试这样的事情

displayModalAndSearchMembers(){
 // using only isLoading should be sufficient, but I wanted to show how you could use [class.classname]="expression" in the html template as well.
 this.isLoading = true; 
 this.showSpinner = true;
 this.displayModal = true;

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

<modal id="custom-modal-2">
      <div *ngIf="displayModal" class="modal"> <!-- added *ngIf -->

          </div>
          <div id="memberSearchBar" *ngIf="showSpinner" [class.loading-div]="isLoading">
              <mat-spinner></mat-spinner>
              Finding Member IDs..
        </div>
  </modal>

编辑

如果模态上也有*ngIf="displayModal"，那么您也可以在模态上使用display: none。

我还添加了一些ts代码。我不确定100％OP想要的行为，但是我假设她想显示/隐藏微调器，并在其上设置类名。

这可以通过仅使用*ngIf="isLoading"来简化：

<div id="memberSearchBar" class="loading-div" *ngIf="showSpinner">

Answer 2

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

Loading spinner

例如：在ts中：

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

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

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

以HTML

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

对不起，我的英语不好，但是我希望这对您有帮助。：）

在服务仍在获取响应时如何显示进度栏

2 个答案: