Mat-select内的CDK虚拟滚动用于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
在关键的东西是当垫选择打开面板我们触发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>
这篇关于Mat-select内的CDK虚拟滚动用于Mat-option的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!