这个问题可以通过触发Angular的变更检测器来解决。在添加/删除列表项后,调用ChangeDetectorRef
的detectChanges()
方法可以强制Angular重新渲染组件。
以下是一个示例组件,该组件使用虚拟滚动来显示一个无限滚动列表,并在用户点击按钮时添加(或删除)新的元素。注意detectChanges()
的调用方式:
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-infinite-scroll',
template: `
{{ item }}
`
})
export class InfiniteScrollComponent {
items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`);
constructor(private cdr: ChangeDetectorRef) {}
add() {
this.items.push(`Item #${this.items.length}`);
this.cdr.detectChanges();
}
remove() {
this.items.pop();
this.cdr.detectChanges();
}
}
在上面的代码中,InfiniteScrollComponent
包含一个无限滚动列表,其中数据存储在items
数组中。当用户点击“添加”按钮时,add()
方法向列表中添加一个新元素,并调用ChangeDetectorRef
的detectChanges()
方法来刷新组件。同样,当用户点击“删除”按钮时,remove()
方法会从列表中删除最后一个元素,并调用detectChanges()
方法。这将强制Angular重新渲染组件,使我们能够看到新添加/删除的列表项。