10

我尝试在 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 的工作垫自动完成？

4

1 回答 1

1

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

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

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

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

于 2020-04-17T07:26:00.010 回答