Cdk virtual-scroll inside mat-select for mat-option [英] Cdk virtual-scroll inside mat-select for mat-option

问题描述

有没有人能够在 mat-select 中使用虚拟滚动，如下所示?

Has anyone been able to use virtual-scroll inside mat-select as shown below ?

<mat-form-field>
    <mat-select placeholder="State">
        <cdk-virtual-scroll-viewport autosize>
            <mat-option *cdkVirtualFor="let state of states" [value]="state">{{state}}</mat-option>
        </cdk-virtual-scroll-viewport>
    </mat-select>
</mat-form-field>

如您所见 https://stackblitz.com/edit/angular-h4xptu?file=app%2Fselect-reset-example.html 它不起作用 - 滚动时会导致奇怪的空白.

As you can see https://stackblitz.com/edit/angular-h4xptu?file=app%2Fselect-reset-example.html it does not work - causes weird blank space as you scroll.

推荐答案

我想我已经解决了这个问题:

I think i have solved this:

https://stackblitz.com/edit/angular-gs4scp

关键是当 mat select 打开面板时，我们触发 cdkVirtualScrollViewPort 滚动并检查视口大小.

The key things are when the mat select opens panel we trigger cdkVirtualScrollViewPort scroll and check view port size.

  openChange($event: boolean) {
    console.log("open change", $event);
    if ($event) {
      this.cdkVirtualScrollViewPort.scrollToIndex(0);
      this.cdkVirtualScrollViewPort.checkViewportSize();
    } else {
    }
  }

我们在哪里使用 @ViewChild

@ViewChild(CdkVirtualScrollViewport, { static: false })
  cdkVirtualScrollViewPort: CdkVirtualScrollViewport;

模板中的其他相关部分非常简单:-

Other relevant pieces in the template are are pretty simple:-

<mat-form-field>
    <mat-select [formControl]="itemSelect"
  placeholder="Select Item"
  (openedChange)="openChange($event)">
    <mat-select-trigger>
      {{ itemTrigger }}
    </mat-select-trigger>
        <cdk-virtual-scroll-viewport itemSize="5" minBufferPx="200" maxBufferPx="400" class="example-viewport-select">
            <mat-option *cdkVirtualFor="let item of items" [value]="item"
                (onSelectionChange)="onSelectionChange($event)">{{item}}</mat-option>
        </cdk-virtual-scroll-viewport>
    </mat-select>
    <mat-hint>Justa hint</mat-hint>
</mat-form-field>

这篇关于Cdk virtual-scroll inside mat-select for mat-option的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！