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>