在Angular 7中,虚拟滚动条在滚动时重置所选项目的问题可能是由于Angular的变更检测机制导致的。解决这个问题的一种方法是使用trackBy函数来告诉Angular如何识别已选择的项目。
以下是一个示例解决方案的代码:
在组件中,定义一个trackBy函数来识别已选择的项目。例如,假设你有一个items数组,其中每个项目都有一个唯一的id属性:
@Component({
selector: 'app-your-component',
template: `
{{ item.name }}
`,
})
export class YourComponent {
items = [
{ id: 1, name: 'Item 1', selected: false },
{ id: 2, name: 'Item 2', selected: false },
{ id: 3, name: 'Item 3', selected: false },
// ...
];
trackByFn(index: number, item: any): number {
return item.id;
}
}
在上面的示例中,我们使用trackByFn函数来告诉Angular使用item的id属性来识别每个项目。这样,即使滚动时重新渲染项目列表,Angular也能正确地保留已选择的项目状态。
请注意,你需要根据你的数据结构和需求来调整示例代码。你可以根据需要在trackByFn函数中使用不同的属性来唯一识别项目。