我尝试在 mat-autocomplete 中使用 cdk-virtual-scroll:
<mat-form-field>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl2"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<cdk-virtual-scroll-viewport class="autocomplete-test-viewport" itemSize="50" minBufferPx="500" maxBufferPx="750">
<mat-option *cdkVirtualFor="let option of options" [value]="option" class="autocomplete-item">
{{option}}
</mat-option>
</cdk-virtual-scroll-viewport>
</mat-autocomplete>
但是,虚拟滚动在此设置中的工作不规律。我生成了 200 个选项,但是如果我使用滚动条向下箭头(chrome)缓慢滚动,它会停在 14 左右。使用 mat-select 的类似设置没有这个问题。
有关整个示例设置(使用 cdk-virtual-scroll 的 mat-autocomplete 和 mat-select),请参阅https://stackblitz.com/edit/angular-xv1n2e?file=src/app/app.component.html 。
有没有人使用 cdk-virtual-scroll 的工作垫自动完成?