Angular Material cdk-virtual-scroll-viewport:如何每行渲染多个项目？
Angular Material cdk-virtual-scroll-viewport:如何每行渲染多个项目？
提问于 2019-08-13 19:24:57
当一行中有多个项目(display: inline-block; vertical-align: top;)时，是否可以使用Angular Material的<cdk-virtual-scroll-viewport>？
对我来说，CDK每行只渲染3-2个项目，在右边留下了很多空间。我已经将itemSize设置为一个项目的高度，并将视口的宽度设置为100%。
回答 1
Stack Overflow用户
发布于 2021-11-10 12:45:20
如果您希望使用不同的库来实现此功能，则可以尝试- ngx-virtual-scroller
您可以使用Angular Scroll CDK通过一些代码来实现相同的功能。我的灵感来自这个帖子-- https://groups.google.com/g/angular/c/dAW9-Svq-o4?pli=1
但是这个函数可以比上面的博客中建议的简单一点
/* Function to convert single array into Array of array */
generateDataChunk(data,chunk=3) {
let index: number;
let dataChunk: [][] = [];
for (index = 0; index < data.length; index += chunk) {
dataChunk.push(data.slice(index, index + chunk));
}
return dataChunk;
}
itemSet = generateDataChunk(itemData);<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let items of itemSet" class="example-item">
<div class="example-sub-item" *ngFor="let item of items">{{item}}</div>
</div>
</cdk-virtual-scroll-viewport>这将实现该功能。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57476762
复制相关文章
相似问题
腾讯云开发者
