如何在 PrimeNG 表中的数据更新时重新触发过滤器?
How to retrigger filters on data update in PrimeNG tables?
如果我向 table 添加一些行,table 视图会动态更新,但我应用的过滤器仅反映初始数据。
例如,如果我在名为“Title
”的 header 上应用过滤器“startsWith
”,过滤器值为“zaalim
”,那么如果初始数据集没有任何 title
以“zaalim
”开头的行,然后即使我每 10 秒添加此类行,视图仍将显示为空。如果您删除过滤器,您可以看到以“zaalim
”开头的 Title
的新行正在逐渐添加。
我希望过滤后的视图反映数据集的变化。 (即使分页也不会自动刷新)。也许我可以在添加每个新行后 re-trigger 现有过滤器?怎么做?
这是一个 hacky 解决方案,但您可以为 table 添加一个 ViewChild 到您的组件:
@ViewChild(Table) table;
然后你可以调用它的私有过滤器方法_filter
,它也会在你更新数据时在内部使用它来更新过滤器。
setInterval(() => {
this.products.push({
albumId: 25000,
id: 24000,
title: 'zaalim haakim',
url: 'google.com',
thumbnailUrl: 'google.com',
});
this.table['_filter']();
}, 10000);
注意倒数第二行的添加。
不过,这更像是一种解决方法。
您必须创建新产品数组而不是更改现有产品。试试这个
setInterval(() => {
this.products = [
...this.products,
{
albumId: 25000,
id: 24000,
title: 'zaalim haakim',
url: 'google.com',
thumbnailUrl: 'google.com',
},
];
}, 10000);
如果我向 table 添加一些行,table 视图会动态更新,但我应用的过滤器仅反映初始数据。
例如,如果我在名为“Title
”的 header 上应用过滤器“startsWith
”,过滤器值为“zaalim
”,那么如果初始数据集没有任何 title
以“zaalim
”开头的行,然后即使我每 10 秒添加此类行,视图仍将显示为空。如果您删除过滤器,您可以看到以“zaalim
”开头的 Title
的新行正在逐渐添加。
我希望过滤后的视图反映数据集的变化。 (即使分页也不会自动刷新)。也许我可以在添加每个新行后 re-trigger 现有过滤器?怎么做?
这是一个 hacky 解决方案,但您可以为 table 添加一个 ViewChild 到您的组件:
@ViewChild(Table) table;
然后你可以调用它的私有过滤器方法_filter
,它也会在你更新数据时在内部使用它来更新过滤器。
setInterval(() => {
this.products.push({
albumId: 25000,
id: 24000,
title: 'zaalim haakim',
url: 'google.com',
thumbnailUrl: 'google.com',
});
this.table['_filter']();
}, 10000);
注意倒数第二行的添加。
不过,这更像是一种解决方法。
您必须创建新产品数组而不是更改现有产品。试试这个
setInterval(() => {
this.products = [
...this.products,
{
albumId: 25000,
id: 24000,
title: 'zaalim haakim',
url: 'google.com',
thumbnailUrl: 'google.com',
},
];
}, 10000);