在 Angular 中,DefaultIterableDiffer 是 IterableDiffers 的默认实现。为了解决这个问题,我们需要更新代码以使用其他 IterableDiffers 实现。
您可以使用您自己的 IterableDiffers 实现或使用 Angular 中的其他一些内置实现(例如 KeyValueDiffers、KeyValueChanges 等)。以下是一个示例,展示如何使用 KeyValueDiffers:
import { Component, KeyValueDiffers, OnInit } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
- {{item}}
`,
})
export class MyComponent implements OnInit {
items = ['Apple', 'Banana', 'Cherry'];
differ: any;
constructor(private differs: KeyValueDiffers) { }
ngOnInit() {
this.differ = this.differs.find(this.items).create();
}
ngDoCheck() {
const diff = this.differ.diff(this.items);
if (diff) {
diff.forEachAddedItem((record) => console.log('Added', record.item));
diff.forEachRemovedItem((record) => console.log('Removed', record.item));
diff.forEachChangedItem((record) => console.log('Changed', record.item));
}
}
}
在上例中,我们注入了 KeyValueDiffers 依赖,使用其创建了 diff 对象,该对象可以检测到数组中项目的更改,并在 ngDoCheck 钩子中进行处理。