Angular 角度材质表已完成渲染事件/材质分页器加载微调器

我使用的是一个角度材质表，它有一个相当大的预查询数据源。现在，每次使用内置分页器更改表页时，在呈现新表行之前都会有一个短暂的延迟，同时我希望显示一个加载微调器

问题是，Paginator只在表页开始更改时触发一个事件，到目前为止，我还没有找到一个解决方案来确定新行何时完全呈现。（此时我将隐藏加载微调器）

我知道服务器端分页可以解决这个问题，但我更喜欢另一种可能性

---

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

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

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

我想到使用“last”局部变量，因为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>

---

在我看来，实现这一点的不太老套的方法是将NgZone作为依赖项注入到组件中，并订阅onStable observable

假设您有一个changePage函数来处理页面更改。然后，您可以执行以下操作：

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

---

欢迎来到SO。请发布您尝试的代码。如果我们定期添加新行会怎么样？不想使用setTimeout。。。

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