数据 table 未重新加载 - primeNG

Question

我正在处理一个显示一组数据的 angular 项目。为此，我使用 primeNG 数据 table。一切正常，但是当我从数据源中删除条目时，数据 table 没有刷新，我仍然可以在 table 中看到已删除的条目。任何帮助将不胜感激。

mycomponent.html

 <p-dataTable [value]="tabledata">
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

iam 在删除时对数据源进行切片

mycomponent.ts

this.tabledata.slice(this.tabledata.indexOf(datatodelete), 1);

Answer 1

请阅读 link 你 provided 的第 Change detection 章。

基本上这个想法是，您可能改变存储 table 值的数组，而 angular 不知道数据已更改，因为数组仍然相同。因此，您需要使用旧数组中的所有值创建一个新数组，但您删除的那个除外。然后，angular 将计算出它需要重新渲染 table，因为数组引用将发生变化。

请详细阅读 Angular 变更检测策略，例如here。基本上，如果您使用检测策略 default，那么一切都会正常，因为 angular 会一直检查所有组件的变化。但是对于较大的网页来说它可能会很慢，因此建议使用更改检测策略 OnPush。这是做什么的，它只检查对象的引用，如果它们发生了变化，它将更新视图（你看到的）。关于它是如何工作的有很多细节，我不能放在这里。

Answer 2

最后我找到了解决方案。我刚刚创建了数据源的副本。并从此副本中删除条目，然后将此副本重新分配给我的原始数据源。

 this.datatablecopy = Object.assign([], this.datatable);


this.datatablecopy.slice(this.datatablecopy.indexOf(datatodelete), 1); 
this.datatable = this.datatablecopy;

数据 table 未重新加载 - primeNG

Data table not reloading - primeNG

angular

primeng-datatable