在Angular 7中,可以使用虚拟滚动库(如ngx-virtual-scroller)来实现虚拟滚动内的单选按钮选择多个单选按钮的功能。以下是一个示例:
npm install ngx-virtual-scroller --save
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
{{ item }}
`,
})
export class MyComponent {
items = Array.from({ length: 10000 }).map((_, i) => `Item ${i + 1}`);
selectedItems = [];
onSelectionChange(item: string) {
if (this.selectedItems.includes(item)) {
this.selectedItems = this.selectedItems.filter((selectedItem) => selectedItem !== item);
} else {
this.selectedItems.push(item);
}
}
}
在上面的示例中,我们使用ngx-virtual-scroller
组件来实现虚拟滚动。在ngx-virtual-scroller
组件中,我们使用*ngFor
循环来创建多个单选按钮,并使用ngModel
实现双向数据绑定。当选择变化时,我们使用onSelectionChange
方法来更新选中的项。
请注意,由于虚拟滚动只渲染当前可见的元素,因此在选择多个单选按钮时,需要通过selectedItems
数组来跟踪选中的项。
希望以上解决方法对你有所帮助!