单击按钮时如何动态显示mat-progress-bar

Question

您好，我在我的 mat-table 中过滤了大约 6000 行数据，当单击“过滤器”按钮时，过滤需要大约 5 秒。我试图在调用函数时显示一个 Mat-Progress-Bar。我附上了一个示例 stackblitz 来尝试重现我的问题。我希望 Mat-Progress-Bar 仅在单击“过滤器”按钮时显示，并在呈现数据时消失。

https://stackblitz.com/edit/angular-4ttand-8ckvs7?file=src/app/table-basic-flex-example.ts

<button mat-raised-button (click)="filterTable()"> Filter Table on Weight!</button>

<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>

export class TableBasicFlexExample {
  isLoading = true

filterTable() {
         this.dataSource = this.dataSource.filter((item) => { 
         return Math.floor(item.weight) > 10});
         this.isLoading = false;
      }
}

Answer 1

试试这个。

https://stackblitz.com/edit/angular-4ttand-i6mwao?file=src/app/table-basic-flex-example.ts

PS：不要忘记删除 setTimeout，我用它来“模拟”你的函数过滤所需的时间。

filterTable() {
    this.isLoading = true
    this.dataSource = this.dataSource.filter((item) => { 
    console.log(Math.floor(item.weight));
    return Math.floor(item.weight) > 10});
    this.isLoading = false;
}