使用Angular Material表格与较大的预查询数据源。现在,每当我使用内置分页器更改表格页面时,新的表格行在渲染之前会有短暂的延迟,并且我想同时显示加载动画。
问题在于,Paginator仅在表页开始更改时触发单个事件,到目前为止,我没有找到解决方案来确定新行何时完全呈现。(这将是我隐藏加载符号的时刻)
我知道服务器端分页将解决此问题,但我更喜欢其他可能性。
有人对我的问题有建议吗?
this.changePage(newPage);
this.zone.onStable.pipe(take(1)).subscribe(() => {
console.log('Do whatever you want, the table is rendered');
});
<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();
}