web-dev-qa-db-ja.com

マットオプションのマット選択内のCDK仮想スクロール

以下に示すように、マットセレクト内で仮想スクロールを使用できる人はいますか？

<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 機能しません-スクロールすると奇妙な空白が表示されます。

angularangular-material2angular-cdk
7
bhantol

私はこれを解決したと思います：

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

重要なことは、マット選択がパネルを開くときに、cdkVirtualScrollViewPortスクロールをトリガーし、ビューポートサイズを確認することです。

  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;

テンプレートの他の関連部分は非常にシンプルです：-

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

仮想スクロールビューポートは、スクロールコンテナーの大きさを知るために、サイズを必要とします。これは、[itemSize]プロパティ<cdk-virtual-scroll-viewport>とその高さ。

あなたの例では、1つの高さ<option>アイテムは48ピクセルです。一度に5つのアイテムを表示する場合、コンテナーのサイズは5 * 48 = 240になります。

<mat-form-field>
    <mat-select placeholder="State">
        <cdk-virtual-scroll-viewport [itemSize]="48" [style.height.px]=5*48>
            <mat-option *cdkVirtualFor="let state of states" [value]="state"> 
                {{state}}
            </mat-option>
        </cdk-virtual-scroll-viewport>
    </mat-select>
</mat-form-field>
3
kevobt