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

【问题标题】：Angular mat table- added row doesn't shown after deleting anotherAngular mat table-删除另一个后不显示添加的行
【发布时间】：2020-06-26 08:06:56
【问题描述】：

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

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

【解决方案1】：

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

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

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

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

【讨论】：

也谢谢你。很高兴为您提供帮助@almogldbh！