cdk-virtual-scroll с mat-autocomplete работает нерегулярно

Я пытаюсь использовать cdk-virtual-scroll внутри mat-autocomplete:

<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>

However the virtual scroll works irregularly in this setup. I generate 200 options but if i scroll slowly by using the scrollbar down arrow (chrome) it stalls around 14. Similar setup with a mat-select doesn't have this problem.

См. https://stackblitz.com/edit/angular-xv1n2e?file=src/app/app.component.html для всего примера настройки (mat-autocomplete и mat-select с помощью cdk-virtual-scroll).

Есть у кого-нибудь рабочий мат-автозаполнение с помощью cdk-virtual-scroll?


angular angular-material angular-material2 angular-cdk
person IHaanstra    schedule 30.10.2018    source источник
comment
Взгляните на эти демонстрации ... github.com/angular/material2/blob/   -  person guzmanoj    schedule 16.04.2019
comment
У меня тоже с этим проблемы. Тебе удалось это решить?   -  person yccteam    schedule 16.01.2021
comment
@yccteam, извини, я больше не пробовал.   -  person IHaanstra    schedule 09.04.2021
comment
Я пришел с более тревожным комментарием. Иногда, когда я пытаюсь прокрутить вверх, он продолжает прокручиваться вниз. Прокрутка с помощью стрелок действительно создает странные вещи.   -  person Buu97    schedule 17.06.2021

Ответы (1)


arrow_upward
0
arrow_downward

Я проверил ваш код и провел несколько тестов, чтобы понять странное поведение. Если вы подпишетесь на событие вывода scrolledIndexChange на CdkVirtualScrollViewport и зарегистрируете индекс в консоли, вы увидите, что:

  • Когда вы используете колесо, всегда прокручивается точное количество элементов (2 для меня), поэтому индекс прокрутки изменится следующим образом: 0 -> 2 -> 4 -> 6 ...
  • Когда вы щелкаете стрелку вниз на полосе прокрутки,
    вы можете увидеть, что шаг прокрутки не соответствует точно высоте одного элемента. И прокрутка
    изменяется таким образом 1 -> 2 -> 3 -> 4 -> 5 -> 4 -> 5 -> 4 ... и
    цикл между двумя значениями.

Решение должно заключаться в том, чтобы исправить шаг прокрутки (пока не знаю, как это сделать), поэтому, если пользователь нажимает на полосу прокрутки (вверху или вниз), прокрутите точно высоту одного элемента.

Другое решение: используйте метод scrollToIndex CdkVirtualScrollViewport для прокрутки к следующему / предыдущему индексу, когда пользователь нажимает стрелку вверх / вниз полосы прокрутки (но не когда пользователь использует колесо для прокрутки)

person thib_o_o    schedule 17.04.2020