如何在 Angular 7 中设置 CdkVirtualScrollViewport 的初始索引(位置)

2023-12-23

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

现在我找到了scrollToIndex and 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>

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

contentCheck = 0

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

3 次检查后,scrollToIndex 是否有效。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular 7 中设置 CdkVirtualScrollViewport 的初始索引(位置) 的相关文章

随机推荐