Angular Material cdk-virtual-scroll-viewport：如何每行渲染多个项目？

Question

当一行中有多个项目时，是否可以使用 Angular Material 的<cdk-virtual-scroll-viewport> （ display: inline-block; vertical-align: top; ）？

对我来说，CDK 每行只渲染 3-2 个项目，右边有很多空间。 我已将 itemSize 设置为一项的高度，并将视口的宽度设置为 100%。

Answer 1

如果你想使用不同的库来实现这个功能，那么你可以尝试 - 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>

这将实现功能。