使用Angular CDK的虚拟滚动视口(cdk-virtual-scroll-viewport)时,有时可能会出现不渲染正确数量项的问题。以下是一个可能的解决方法的代码示例:
{{item}}
import { Component } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
items: number[];
constructor() {
this.items = Array.from({length: 1000}, (_, i) => i + 1);
}
}
import { CdkVirtualScrollModule } from '@angular/cdk/scrolling';
@NgModule({
imports: [
CdkVirtualScrollModule,
// 其他模块...
],
// 其他配置...
})
export class AppModule { }
.viewport {
height: 200px;
}
.item {
height: 50px;
}
这些是可能的解决方法的示例,可以根据你的具体需求进行适当的调整和修改。