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

Question

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

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

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

这是stackblitz

Answer 1

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

注意倒数第二行的添加。

不过，这更像是一种解决方法。

Answer 2

您必须创建新产品数组而不是更改现有产品。试试这个

setInterval(() => {
  this.products = [
    ...this.products,
    {
      albumId: 25000,
      id: 24000,
      title: 'zaalim haakim',
      url: 'google.com',
      thumbnailUrl: 'google.com',
    },
  ];
}, 10000);

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

How to retrigger filters on data update in PrimeNG tables?

angular

primeng

primeng-datatable