Question

<mat-card *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center">
  <mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
</mat-card>

loadData(filters: MultipleExpenseFilterRequest) {
    this.isLoading = true;
    this.taskService.getAllTasks().subscribe(taskData => {
      this.taskList = taskData;
      this.expensesService.getAllExpensesTypes().subscribe(expensesTypeData => {
        this.expensesTypeList = expensesTypeData;
        this.expensesService.getAllCurrencyType().subscribe(currencyData => {
          this.currencyList = currencyData;
          this.initializeExpenses();
        });
      });
    });
  }

  initializeExpenses() {
    this.expensesService.getAllExpenses(11, 2019).subscribe(data => {
      this.isLoading = false;
      this.expenses.data = data;
    });
  }

更改垫旋转器的控件属性的值（isLoading）不会隐藏垫旋转器。仅在单击微调器或将鼠标移至微调器时，微调器才隐藏。

当我使用的表的datasource.data为空时，会发生这种情况。所以我没有从服务器得到任何数据。

Answer 1

如果API发生错误，请为isLoading分配false，并使用ChangeDetectorRef：

constructor(private cd: ChangeDetectorRef) {
}

initializeExpenses() {
    this.expensesService.getAllExpenses(11, 2019).subscribe(data => {
      this.isLoading = false;
      this.expenses.data = data;
      this.cd.detectChanges();
    }, error => {
       this.isLoading = false;
       this.cd.detectChanges();
    });
}

对于前三个API调用，您还需要使用error部分。如果发生错误，则旋转器将停留，因为它没有达到initializeExpenses()。

更改控件属性后，垫旋转器不会隐藏

1 个答案: