这是一个常见的问题,因为Angular虚拟滚动只在滚动时渲染可见区域的一部分,不像传统的列表组件每次更新都会重新渲染整个列表。解决此问题的一种方法是使用ChangeDetectorRef来检测变化并手动触发组件重新渲染。
示例代码:
import { Component, Input, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'my-list',
template:
,
})
export class MyListComponent {
items = ['item1', 'item2', 'item3'];
constructor(private cdr: ChangeDetectorRef) {}
addItem() { this.items.push('new item'); this.cdr.detectChanges(); } }
在上面的示例中,我们使用ChangeDetectorRef来手动触发组件的变化检测,并在addItem方法中添加新项并更新列表。这将强制虚拟滚动重新渲染整个列表,以便包含新添加的项。
请注意,在实际使用中可能需要根据具体需求进行一些调整。