angular - Angular 9 CDK 无限滚动使用 scrolledIndexChange 加载更多数据

Question

我正在尝试使用 cdk 的虚拟滚动组件执行无限滚动，但没有取得任何成功。

我正在使用scrolledIndexChange在索引更改时加载更多数据，但该索引是恒定的。指数值不变

先感谢您

.html

<cdk-virtual-scroll-viewport  itemSize="100" (scrolledIndexChange) ="index($event)"   >

 <li  *cdkVirtualFor="let item of infinite; trackBy: trackByIdx" > 
     {{item.purchase_stock_id}}

 </li>
</cdk-virtual-scroll-viewport>

.ts

index(val) {

    console.log(val)
    this.page ++ ;
    if(this.page == this.total_pages) {
      console.log("finished")
      return
    }      
    const end = this.viewport.getRenderedRange().end;      
    const total = this.viewport.getDataLength();      
    console.log(`${end}, '>=', ${total}`);               
        if(end === total) {             
         this.getdata(this.limit, this.skip)            
        }

     } 


getdata(limit, skip){

    this.FactService.getdata(limit, skip).subscribe(data =>{
      if(data){
        console.log(data);
        this.infinite = this.infinite.concat(data)
        }
    })
  }