Angular2：更新数组时*ngFor不更新

发布于05月28日

我有一个对象数组(我们称其为arr).在(change)方法中我的组件输入之一中，我修改了这些对象的属性之一，但是在视图(*ngFor)中什么都没有改变.我读到Angular2更改检测不判断数组或对象的内容，所以我try 了以下方法:

this.arr = this.arr.slice();

和

this.arr = [...this.arr];

But the view doesn't change, it still shows the old attribute. In the (change) method with console.log() I got the correct array. Weird, but this one works: this.arr = []; I tried NgZone 和 markForCheck() too.

推荐答案

还可以在*ngFor表达式中使用trackBy选项，为数组中的每个项提供唯一的ID.这确实会让您trackBy%负责更改检测，所以每次数组中的项更改时都会更新此(唯一)属性.只有当数组中的任何项被赋予不同的trackBy属性时，Angular才会重新呈现列表:

*ngFor="let item of (itemList$ | async); trackBy: trackItem"

或者:

*ngFor="let item of itemList; trackBy: trackItem"

其中:

trackItem是组件中的公共方法:

public trackItem (index: number, item: Item) {
  return item.trackId;
}

Angular2：更新数组时*ngFor不更新

推荐答案

Angular相关问答推荐

导入浏览器模块时出错已导入commonModule的insted，animationBrower也显示错误，当p打开时

RXJS运算符用于combineLatest，不含空值

第15角Cookie的单元测试用例

仅在展示时使用垫式步进器

无法匹配任何路由.URL段：'；英雄'；

弯管记忆

Angel Project Build从Angel 8升级后，从12MB增加到90MB

如何在 Angular RxJS 中替换订阅中的 subscrib？

Angular Mat Select 显示键盘焦点和鼠标悬停焦点的问题

Angular 信号在 effect() 中使用 debounce

TypeError：this.restoreDialogRef.afterClosed 不是函数

as和let之间的异步管道区别

根据变量值更改按钮样式

如何从表单组中禁用的表单控件中获取值？

请添加@Pipe/@Directive/@Component 注解

ConnectionBackend 没有提供程序

angular4的所见即所得编辑器

Angular：找不到不同的支持对象[object Object]

如何在 Angular 2 中动态添加和删除表单字段

如何作为模块的子模块路由到模块 - Angular 2 RC 5