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)
        }
    })
  }