Angular 9 cdk virtual scroll - индекс прокрутки не меняется, даже если пользователь прокручивает - PullRequest
Новая
       124

Angular 9 cdk virtual scroll - индекс прокрутки не меняется, даже если пользователь прокручивает

1 голос
/ 07 мая 2020

Я использую angular 9 для бесконечной прокрутки с помощью CdkVirtualScrollViewport. Я звоню (scrolledIndexChange), чтобы обнаружить изменение индекса. По мере изменения индекса я хочу загрузить больше данных из моего API.

Но проблема в том, что индекс всегда равен нулю. Даже если пользователь пытается прокрутить, значение индекса не меняется.

В моем API у меня есть два поля - limit и skip. Лимит определяет, сколько записей вы хотите получить, а пропустить - сколько записей нужно пропустить. Значит, значение пропуска равно 0 для индекса scrolledIndexChange 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>
...