angular - 带有 mat-autocomplete 的 cdk-virtual-scroll 不规则地工作

Question

我尝试在 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 的类似设置没有这个问题。

见 https://stackblitz.com/edit/angular-xv1n2e?file=src/app/app.component.html对于整个示例设置(带有 cdk-virtual-scroll 的 mat-autocomplete 和 mat-select)。

有没有人使用 cdk-virtual-scroll 进行工作垫自动完成？

Answer 1

我检查了您的代码并进行了一些测试以了解这种奇怪的行为。如果您订阅了 CdkVirtualScrollViewport 上的 scrolledIndexChange 输出事件，并在控制台中记录索引，您可以看到:

使用滚轮时，始终滚动精确数量的项目
(对我来说是 2)所以滚动索引会这样改变:0 -> 2 -> 4 ->
6 ...

当您单击滚动条的向下箭头时，您可以看到
滚动步骤与一个项目的高度不完全匹配。而
以这种方式滚动更改 1 -> 2 -> 3 -> 4 -> 5 -> 4 -> 5 -> 4 ... 和
在两个值之间循环。

解决方案应该是修复滚动步骤(尚不知道如何执行此操作)，因此如果用户单击滚动条(顶部或向下)，请准确滚动一个项目的高度。

其他解决方案，当用户单击滚动条的顶部/向下箭头时，使用 CdkVirtualScrollViewport 的 scrollToIndex 方法滚动到下一个/上一个索引(但不是当用户使用滚轮滚动时)