带有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进行mat-autocomplete工作？

Answer 1

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

• 当您使用滚轮时，总是会滚动确切数量的项目（对我来说是 2 个），因此滚动索引将以这种方式更改：0 -> 2 -> 4 -> 6 ...
• 当您单击滚动条的向下箭头时，您可以看到
  滚动步骤与一项的高度不完全匹配。滚动
  以这种方式更改 1 -> 2 -> 3 -> 4 -> 5 -> 4 -> 5 -> 4 ... 并
  在两个值之间循环。

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

其他解决方案，当用户单击滚动条的上/下箭头时，使用 CdkVirtualScrollViewport 的scrollToIndex 方法滚动到下一个/上一个索引（但当用户使用滚轮滚动时则不滚动）