角度Mat-Table完成渲染事件/垫分页器Loading Spinner [英] Angular Mat-Table finished rendering Event / Mat Paginator Loading Spinner

问题描述

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

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

我知道服务器端分页可以解决此问题，但我希望其他可能性.

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

解决方案

在我看来，更简单的方法是将NgZone作为组件中的依赖项注入并订阅onStable可观察对象.

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

  this.changePage(newPage);this.zone.onStable.pipe(take(1)).subscribe(()=> {console.log('做任何你想做的事情，表被渲染');}); 

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.

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?

解决方案

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.

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

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