Как установить начальный индекс (положение) для CdkVirtualScrollViewport в Angular 7 - PullRequest
0 голосов
/ 12 ноября 2018

Мне нужно, чтобы начальная позиция cdk-virtual-scroll-viewport отличалась от первого элемента / элемента списка.

Теперь я нашел методы scrollToIndex и scrollTo, но я могу только получитьчтобы они работали при использовании его в ngAfterViewChecked, что не очень хорошо.

  1. Может ли кто-нибудь подтвердить, что использование этих методов в ngAfterViewChecked является правильным способом ведения дел?
  2. Если нет, показать альтернативный метод / технику?

  @ViewChild(CdkVirtualScrollViewport) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.push(index);
    }
  }

  ngAfterViewChecked() {
    this.cdkVirtualScrollViewport.scrollToIndex(2000);
  }
  <ul class="list">
    <cdk-virtual-scroll-viewport style="height:264px" itemSize="88">
      <ng-container *cdkVirtualFor="let n of numbers">
        <li style="height:88px">{{ n }}</li>
      </ng-container>
    </cdk-virtual-scroll-viewport>
  </ul>

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Хотя это не идеальное решение, вы можете добиться такого поведения, комбинируя afterViewInit с setTimeout:

ngAfterViewInit() {
    setTimeout(() => {
        this.cdkVirtualScrollViewport.scrollToIndex(50);
    });
}
0 голосов
/ 12 декабря 2018

У меня такая же проблема, у меня не очень элегантное решение

contentCheck = 0

ngAfterViewChecked() {
  if (this.contentCheck < 3) {
  this. cdkVirtualScrollViewport.scrollToIndex(4000);
  this.contentCheck++;
 }
}

После 3 проверок работает scrollToIndex.

...