Angular Mat-Table完成渲染事件/ Mat Paginator加载旋转图标

Question

使用Angular Material表格与较大的预查询数据源。现在，每当我使用内置分页器更改表格页面时，新的表格行在渲染之前会有短暂的延迟，并且我想同时显示加载动画。

问题在于，Paginator仅在表页开始更改时触发单个事件，到目前为止，我没有找到解决方案来确定新行何时完全呈现。(这将是我隐藏加载符号的时刻)

我知道服务器端分页将解决此问题，但我更喜欢其他可能性。

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

- max Haslehner

---

欢迎来到SO。请发布您尝试过的代码。 - Allabakash

Answer 1

在我看来，较少 hacky 的方法是将 NgZone 注入为您组件的依赖项，并订阅 onStable 可观察对象。假设您有一个 changePage 函数处理页面更改。然后，您可以这样做：

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

- vbourdeix

Answer 2

我使用了（未公开的）“last”本地变量来完成它。该变量在表中的最后一行设置为true。使用它，我将“last-row”类添加到最后一行中的元素。然后使用MutationObserver检测该元素何时插入DOM。

即使这基本上是一个轮询，因为每次DOM更改时都会执行MutationObserver处理程序，但我们能够在最后一行插入DOM时执行一段代码。我还没有尝试过使用Paginator。

我得到了使用“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>

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

- Nicolae Daian

---

如果我们需要定期添加新行，但又不想使用setTimeout怎么办？ - Simon