Как программно прокрутить до элемента виртуальную прокрутку материала angular? - PullRequest
Новая
       45

Как программно прокрутить до элемента виртуальную прокрутку материала angular?

0 голосов
/ 06 февраля 2019

У меня есть список, в котором есть много элементов, и каждый элемент может быть выбран.Для этого я использую Angular Material Virtual Scroll.Когда элемент выбран, выбранный элемент выделяется, а затем сохраняется на сервере.Когда я обновляю страницу, выбранный элемент поступает с сервера и снова выделяется.

Мой код выглядит как 

<cdk-virtual-scroll-viewport itemSize="40" class="wrapper">
  <div *cdkVirtualFor="let item of list"
       [class.selected]="item.id === selectedItem.id">
  </div>
</cdk-virtual-scroll-viewport>

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

В документах есть метод scrollToIndex.Где я могу найти экземпляр FixedSizeVirtualScrollStrategy, чтобы я мог вызвать этот метод?

1 Ответ

0 голосов
/ 06 февраля 2019

Конечно, вам нужно получить ссылку на экземпляр CdkVirtualScrollViewport. 

@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

scrollToMiddle(){
  this.viewPort.scrollToIndex(list.length/2, "smooth");
}

Пример можно найти в этом стеке бликов

ДляТребуя прокрутки до индекса выбранного элемента в списке, вы можете сделать следующее: 

ngAfterViewInit(){
  const selectedIndex = this.list.findIndex(elem => elem.id === this.selectedItem.id);
   if(selectedIndex > -1){
     this.viewPort.scrollToIndex(selectedIndex);
   }
}

Примечание: это предполагает, что список уже загружен в течение жизненного цикла ngAfterViewInit.Поскольку вы не предоставили больше информации о том, как устанавливается значение списка, это лучшее, что я могу предоставить.

...