如何在Angular 7中设置CdkVirtualScrollViewport的初始索引(位置) [英] How to set the initial index (position) for the CdkVirtualScrollViewport in Angular 7

问题描述

我需要cdk-virtual-scroll-viewport的初始位置不是列表的第一个元素/项目.

I need the inital position of the cdk-virtual-scroll-viewport to be other than the first element / item of the list.

现在，我找到了scrollToIndex和scrollTo方法，但是只有在ngAfterViewChecked中使用它们时，我才能让它们正常工作.

Now I found the scrollToIndex and scrollTo methods, but I only can get them to work when using it in the ngAfterViewChecked, which feels off.

1. 有人可以确认在ngAfterViewChecked中使用这些方法是正确的处理方式吗?
2. 如果不是，请显示替代方法/技术?

1. Can someone confirm that the using those methods in the ngAfterViewChecked is the right way of doing things?
2. If not, show an alternative method / technique?

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

推荐答案

我有同样的问题，我有一个不太优雅的解决方案

I have the same problem, I have a not so elegant solution

contentCheck = 0

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

3次检查后，scrollToIndex起作用.

After 3 checks the scrollToIndex works.

这篇关于如何在Angular 7中设置CdkVirtualScrollViewport的初始索引(位置)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！