Angular Mat-Table 完成渲染事件/Mat Paginator Loading Spinner

问题描述

我正在使用带有相当大的预查询数据源的 Angular Material Table.现在，每次我使用内置分页器更改表格页面时，在呈现新表格行之前我都会有一个短暂的延迟，我想在此期间显示一个加载微调器.

I am using an Angular Material Table with a rather big, pre queried Datasource. Now, everytime i change the Table Pages with the built in Paginator, i have a short Delay before the new Table-Rows are rendered and i would like to display a Loading Spinner in the meantime.

问题是，当表格页面开始更改时，分页器只会触发一个事件，到目前为止，当新行完全呈现时，我没有找到解决方案.(这将是我隐藏加载 Spinner 的时刻)

The Problem is, the Paginator does only fire a single Event when the Table-Page starts changing and up to now, I did not find a solution to find out, when the new Rows are rendered completely. (This would be the moment when I would hide the loading Spinner)

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

I know Server Side Pagination would solve this Issue but i would prefer another Possibility..

有人对我的问题有什么建议吗?

Has anybody recommendations for my Problem?

推荐答案

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

In my opinion, the less hacky way to do this is to inject NgZone as a dependency in your component and to subscribe to the onStable observable.

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

Let's say you have a changePage function handling the page changing. You can then do this :

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

这篇关于Angular Mat-Table 完成渲染事件/Mat Paginator Loading Spinner的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！