更改控件属性后，垫子微调器不会隐藏

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;
});
}

更改垫微调器 (isLoad( 的控件属性的值不会隐藏垫微调器。仅当将鼠标移到微调器上或将鼠标移到微调器上时，微调器才会隐藏。

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

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 调用。如果发生错误，微调器将保留，因为它没有到达initializeExpenses()。