Angular 9 CDK虚拟滚动-即使用户滚动，滚动索引也不会更改

Question

我正在使用angular 9使用CdkVirtualScrollViewport执行无限滚动。我正在致电(scrolledIndexChange)来检测索引更改。随着索引的更改，我想从我的API加载更多数据。

但是问题是索引始终为零。即使用户尝试滚动索引值也不会改变。

在我的API中，我有两个字段-限制和跳过。限制指定您要检索的记录数，跳过指定要跳过的记录数。因此，对于索引scrolledIndexChange 0，跳过值是0，如果scrolledIndexChange大于零，则跳过值将递增。

但是索引没有改变。我还检查了它是否未到达最后一页

.ts

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

  constructor(public FactService : FactService) {
    this.get_count()
  }

get_count(){
    this.FactService.getcount().subscribe(data => {
      if(data){
        console.log(data.count)
        this.count = data.count
        this.total_pages = Math.ceil(data.count/this.limit)
        console.log(this.total_pages)
      }
    })
  }

  trackByIdx(i: number) {
    return i;
  }

  getdata(limit, skip){

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


  index(val) {

    this.page ++ ;
    console.log(val)
    console.log(this.page , this.total_pages)
    if(val == 0) {
      console.log("zero")
     this.getdata(8,0)
    }

    else {

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

        console.log("else")

        if(end === total) {

         this.getdata(this.limit, this.skip+8)

        }
      }


    }

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>