Question

我将Angular Material Table与相当大的预先查询的数据源一起使用。现在，每次我使用内置的Paginator更改“表格页面”时，在呈现新的“表格行”之前都会有短暂的延迟，并且我想同时显示“加载微调器”。

问题是，当Table-Page开始更改时，Paginator仅触发单个事件，直到现在，当完全渲染新的Rows时，我仍未找到解决方案。（这就是我隐藏正在加载的Spinner的那一刻）

我知道服务器端分页可以解决此问题，但我希望使用另一种可能性。

有人对我的问题有建议吗？

Answer 1

我这样做的方法是使用（未记录）“最后一个”局部变量，该变量对于表的最后一行设置为true。使用它，我在最后一行的元素中添加了“最后一排”类。然后使用MutationObserver来检测何时将该元素插入DOM。

即使这基本上是一个池，因为每次发生DOM更改时都会执行MutationObserver处理程序，但是当在DOM中插入最后一行时，我们也能够执行一段代码。我还没有尝试过分页器。

我想到ngFor拥有它，因此想到了使用“最后一个”局部变量，并且我认为该表应实现为ngFor或应使用一个...

<table mat-table [dataSource]="(results$ | async)?.drivers" class="mat-elevation-z8">
<ng-container matColumnDef="colId">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td class="cell-id" mat-cell *matCellDef="let driver; let i = index; let isLastRow = last">
        <div class="no-wrap-ellipsis" [ngClass]="{'last-row': isLastRow}">{{driver.driverId}}</div>
    </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="scheduleTable_displayedColumns; sticky: true;"></tr>
<tr mat-row *matRowDef="let row; columns: scheduleTable_displayedColumns;"></tr>

  protected mutationObserverToDetectLastRow: MutationObserver;

  ngOnInit(): void {
    this.initMutationObserverToDetectLastRow();
  }

  private initMutationObserverToDetectLastRow = () => {
    this.mutationObserverToDetectLastRow = new MutationObserver(_ => this.mutationObserverToDetectLastRowHandler());
    this.mutationObserverToDetectLastRow.observe(document, { attributes: false, childList: true, characterData: false, subtree: true });
  }

  protected mutationObserverToDetectLastRowHandler = () => {
    if (document.body.contains(document.body.querySelector(".last-row"))) {
      console.log("Last row was displayed");
    }

    this.mutationObserverToDetectLastRow.disconnect();
  }

  ngOnDestroy(): void {
    this.mutationObserverToDetectLastRow.disconnect();
  }

Answer 2

在我看来，更简单的方法是将 NgZone 作为依赖项注入您的组件并订阅 onStable observable。

假设您有一个 changePage 函数来处理页面更改。然后你可以这样做：

this.changePage(newPage);
this.zone.onStable.pipe(take(1)).subscribe(() => {
  console.log('Do whatever you want, the table is rendered');
});

角度Mat-Table完成渲染事件/垫分页器Loading Spinner

2 个答案: