Question

我有一个包含很多项目的列表，可以选择每个项目。为此，我使用了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>

问题在于，如果选择了列表中位于下方的项目，则该项目将突出显示，但是我必须向下滚动至列表才能看到它。当该项目来自服务器时，我想以编程方式向下滚动至它。

如果docs有一个scrollToIndex方法。在哪里可以找到FixedSizeVirtualScrollStrategy的实例，以便可以调用此方法？

Answer 1

当然，您需要获得对CdkVirtualScrollViewport实例的引用。

@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

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

可以找到一个示例in this stackblitz

要滚动到列表中所选元素的索引，可以执行以下操作：

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

注意：这假设列表在ngAfterViewInit生命周期中已经加载。您尚未提供有关如何设置列表值的更多信息，所以这是我能提供的最好的信息。

如何使用angular的材质虚拟滚动以编程方式滚动到项目？

1 个答案: