时间戳

首页 > 解决方案 > Angular mat table-删除另一个后不显示添加的行

angular - Angular mat table-删除另一个后不显示添加的行

问题描述

我创建了一个表，用户可以添加行（通过推送）

dataSource = new MatTableDataSource(this.ELEMENT_DATA);
this.ELEMENT_DATA.push(...);
this.table.renderRows();

并删除行（通过过滤数据源），这些操作工作得很好。

this.dataSource.data = this.dataSource.data
      .filter(i => i !== elm)
      .map((i, idx) => (i.position = (idx + 1), i));

删除一行并添加另一行后，ELEMENT_DATA 数组确实获取了该项目，并且表格不会显示它。谢谢。

标签： angular

解决方案

表检测更改策略是ChangeDetectionStrategy.OnPush，因此这意味着要显示新项目，您需要更改数组引用

您的删除函数返回带有过滤数据数组的新数组。我认为你的添加功能只是做array.push(newItem)

因此您可以通过这种方式添加新项目。这应该适用于您的情况。

this.dataSource.data = [...this.dataSource.data, newItem]

推荐阅读