Question

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

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

Plesae阅读了provided链接的Change detection章。

基本上这个想法是你可能改变存储表值的数组，而angular不知道数据是否已经改变，因为数组仍然是相同的。因此，除了删除的值之外，您需要使用旧的所有值创建一个新数组。然后，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;

数据表没有重新加载 - primeNG

2 个答案: