可能是因为*ngFor指令使用了默认的“trackBy”函数,导致缓存无效。可以尝试手动设置“trackBy”函数。例如,针对以下的示例:
HTML模板:
- {{ item.name }}
组件:
export class MyComponent {
itemList = [{ id: 1, name: 'item1' }, { id: 2, name: 'item2' }, { id: 3, name: 'item3' }];
constructor() {
// 更新列表
setTimeout(() => {
this.itemList.push({ id: 4, name: 'item4' });
}, 2000);
}
}
可以在*ngFor指令上添加“trackBy”属性:
- {{ item.name }}
并在组件中定义“trackById”函数:
export class MyComponent {
itemList = [{ id: 1, name: 'item1' }, { id: 2, name: 'item2' }, { id: 3, name: 'item3' }];
constructor() {
// 更新列表
setTimeout(() => {
this.itemList.push({ id: 4, name: 'item4' });
}, 2000);
}
trackById(index: number, item: { id: number, name: string }): number {
return item.id;
}
}
这样就可以正确呈现出所有列表项了。