如何在 PrimeNG 表中的数据更新时重新触发过滤器?

How to retrigger filters on data update in PrimeNG tables?

如果我向 table 添加一些行,table 视图会动态更新,但我应用的过滤器仅反映初始数据。

例如,如果我在名为“Title”的 header 上应用过滤器“startsWith”,过滤器值为“zaalim”,那么如果初始数据集没有任何 title 以“zaalim”开头的行,然后即使我每 10 秒添加此类行,视图仍将显示为空。如果您删除过滤器,您可以看到以“zaalim”开头的 Title 的新行正在逐渐添加。

我希望过滤后的视图反映数据集的变化。 (即使分页也不会自动刷新)。也许我可以在添加每个新行后 re-trigger 现有过滤器?怎么做?

这是stackblitz

这是一个 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);