您可以使用Angular Material的cdk-virtual-scroll-viewport指令来实现每行渲染多个项目的效果。以下是一个包含代码示例的解决方案:
npm install @angular/cdk @angular/material
import { Component, OnInit } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
items: any[] = [];
// ... 其他代码
}
ngOnInit() {
for (let i = 0; i < 1000; i++) {
this.items.push({ name: `Item ${i}` });
}
}
{{ item.name }} - Sub Item {{ subItem }}
在上面的示例中,*cdkVirtualFor指令用于循环渲染items数组中的每个项目。*ngFor指令用于在每行中渲染多个子项目。
请注意,您需要根据实际情况调整样式和数据。这只是一个简单的示例来演示如何在Angular Material的cdk-virtual-scroll-viewport中每行渲染多个项目。
希望这可以帮助到您!