在Angular 7中,ngFor指令默认使用对象引用来检测数组的变化。这意味着如果数组中的对象属性发生变化,但数组的引用没有改变,ngFor将不会更新绑定属性。
要解决这个问题,你可以使用对象的属性而不是对象本身来迭代数组。这样,当属性发生变化时,ngFor会检测到变化并更新绑定属性。
以下是一个使用对象属性的示例代码:
在组件中定义一个类或接口来表示数组中的对象:
export interface Item {
id: number;
name: string;
}
在组件中定义一个数组,并在ngOnInit方法中初始化它:
export class MyComponent implements OnInit {
items: Item[];
ngOnInit() {
this.items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
];
}
}
在模板中使用ngFor指令来迭代数组的属性:
-
{{ item.name }}
在组件中添加一个方法来更新对象的属性:
updateName(item: Item) {
item.name = 'Updated Name';
}
现在,当点击"Update Name"按钮时,ngFor将更新绑定的属性并显示更新后的值。
这是一个解决“Angular 7中的ngFor不更新绑定属性”的示例方法。