在使用*ngFor指令的时候使用trackBy函数,这个函数可以跟踪数组中的每个元素并返回一个唯一标识符,确保每个元素在重新渲染时保持它们的状态不变。例如:
HTML模板:
Controller:
@Component({
selector: 'app-example',
template:
})
export class ExampleComponent {
items = [1, 2, 3, 4, 5];
trackByFn(index, item) { return item.id; // 假设items数组中每个元素都有唯一的id属性 } }
这个例子中,*ngFor指令会调用trackByFn函数来跟踪每个元素,确保元素在重新渲染时保持它们的状态不变。由此避免了完整的列表刷新问题。