Angular Virtual Scroll 显示问题

Question

几天来我一直在努力寻找解决方案，但似乎找不到。

我们加载了很多垫子卡片，并认为最好添加虚拟滚动，但它立即将显示更改为行(显示所有垫子卡片堆叠在一起)。我已多次重写该部分，但无济于事。

<div fxLayout style="margin-top: 40px" class="row">
    <cdk-virtual-scroll-viewport [itemSize]="20" class="example-viewport">
      <div fxFlex.gt-md="265px" fxFlex.lg="265px" *cdkVirtualFor="let course of courses | courseDrop : typeView | courseTemp: courseSearch">
        <mat-card class="course-card" >
         ...content
        </mat-card>
      </div>
    </cdk-virtual-scroll-viewport>
  </div>

Answer 1

是的，这是虚拟滚动的限制 - 它适用于行。

如果您需要让项目并排显示，您需要将组件中的项目拆分成组，并让虚拟滚动在组上工作。

由于您正在使用断点，因此您需要做一些工作来监听断点更改。您可以使用 MediaObserver 来做到这一点.

您需要调整过滤或在组件中进行调整。我将其排除在外。

function split<T>(input: T[], groupSize: number): T[][]  {
  const out: T[][] = [];
  for(let i=0; i < input.length; i += groupSize) {
    out.push(input.slice(i, i + groupSize));
  }
  return out;
}


mediaObserver.media$.subscribe((change: MediaChange) => {
      
      if ( change.mqAlias == 'xs') {
         this.viewCourses = split(this.courses,1);
      }
      if ( change.mqAlias == 'md') {
         this.viewCourses = split(this.courses,2);
      }
      if ( change.mqAlias == 'lg') {
         this.viewCourses = split(this.courses,3);
      }
    });


<div fxLayout style="margin-top: 40px" class="row">
    <cdk-virtual-scroll-viewport [itemSize]="20" class="example-viewport">
      <div *cdkVirtualFor="let courses of viewCourses">
        <div fxFlex.gt-md="265px" fxFlex.lg="265px" *ngFor="let course of courses">
        <mat-card class="course-card" >
         ...content
        </mat-card>
        </div>
      </div>
    </cdk-virtual-scroll-viewport>
  </div>