时间戳

首页 > 解决方案 > 从角度材料列表中删除带有标题的项目

angular - 从角度材料列表中删除带有标题的项目

问题描述

我有带标题的材料清单。类似的项目分组在标题下。我还在其中添加了删除按钮。如果我从列表中删除最后一项，那么标题也应该删除。我试过的如下：

https://stackblitz.com/edit/angular-material-list-brenrk?file=app/app.component.ts

但它并没有被删除。请帮忙。

标签： angularangular-material2

解决方案

默认情况下，Angular 的更改检测会循环遍历您的数组，并检查是否存在对先前更改的引用更改。现在，您没有更改任何引用，只是这些对象的一个​​属性。由于数组中的对象引用没有改变，Angular 不会识别出发生了变化。我建议使用不可变运算符，它不会改变先前的对象，而是创建一个现在的对象：

removeFromList(obj){
  this.valmap = this.valmap
    .map(element => {
      return {category: element.category, values: element.values.filter(fruit => fruit.name !== obj.name)}
  })
    .filter(element => element.values.length > 0)
}

你的另一个选择是trackBy在你的˙ngFor`中引入，当属性改变时告诉Angular。

推荐阅读