web-dev-qa-db-ja.com

角度マテリアルの仮想スクロールを使用してプログラムでアイテムにスクロールする方法は？

多くのアイテムが含まれているリストがあり、各アイテムを選択できます。これには、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>

問題は、リストで下にある項目を選択すると強調表示されるが、それを表示するにはリストまでスクロールする必要があるということです。その項目がサーバーからのものである場合、プログラムでその項目までスクロールしたいと思います。

私は docsscrollToIndexメソッドがあります。 FixedSizeVirtualScrollStrategyのインスタンスを見つけることができるので、このメソッドを呼び出すことができますか？

angularangular-materialangular-cdkvirtualscrollangular-cdk-virtual-scroll
11
MTZ

もちろん、CdkVirtualScrollViewportインスタンスへの参照を取得する必要があります。

@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

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

例を見つけることができます このstackblitz内

リストで選択した要素のインデックスまでスクロールする必要がある場合は、次の操作を実行できます。

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

注：これは、リストがngAfterViewInitライフフック中にすでにロードされていることを前提としています。リスト値の設定方法に関する詳細情報を提供していないので、これが私が提供できる最高の方法です。

13
Jota.Toledo