Question

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

我们加载了很多 mat-cards 并认为最好添加虚拟滚动，但是它立即将显示更改为行（显示所有 mat-cards 堆叠在一起）。我已经重写了几次，但都无济于事。

<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>

角度虚拟滚动显示问题

1 个答案: