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个选项，但是如果我使用滚动条向下箭头（铬）缓慢滚动，则停滞在14个左右。使用mat-select进行类似的设置不会出现此问题。

有关完整的示例设置（mat-autocomplete和cdk-virtual-scroll进行mat-select），请参见https://stackblitz.com/edit/angular-xv1n2e?file=src/app/app.component.html。

有人用cdk-virtual-scroll可以自动完成工作吗？

Answer 1

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

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

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

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

带有垫自动完成功能的cdk虚拟滚动

1 个答案: