CDK Infinite scroll end проверка

Я пытаюсь реализовать бесконечную прокрутку для загрузки элементов в список динамически, когда пользователь прокручивает список вниз, но когда я получаю доступ к концу и итогу, он становится таким же, мне нужно проверить, достигнут ли последний элемент, а затем добавить новый элементы в список. проблема в том, что конечная и общая сумма одинаковы и срабатывает каждый раз

HTML

<cdk-virtual-scroll-viewport style="height: 300px" itemSize="5" (scrolledIndexChange)="nextBatch($event)">
  <li *cdkVirtualFor="let row of auditDetails; let j=index;" style="height: 100px;  box-shadow: 0 1px 1px black;">{{j}}</li>
</cdk-virtual-scroll-viewport>

TS

auditDetails = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

ngAfterViewInit() { }

nextBatch(currIndex: number, items: any[]) {
  const start = this.viewPort.getRenderedRange().start;
  const end = this.viewPort.getRenderedRange().end;
  const total = this.viewPort.getDataLength();
  console.log(`end is ${end} total is ${total}`)
  if (end == total) {
    console.log("end reached increase page no")
  }
}

trackByIdx(i: number) {
  return i;
}

Ссылка на Stackblitz https://stackblitz.com/edit/cdk-infinite-scroll-ufuewv < / а>


angular angular-cdk angular-cdk-virtual-scroll virtualscroll
person Jithin P    schedule 12.08.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Согласно документации CDK свойство itemSize выражается в пикселей. Я думаю, вы пытались выразить это как номер пункта, что неверно. Вы должны попробовать это так (со значением itemSize, соответствующим вашей встроенной стилизованной высоте 100 пикселей для каждого элемента):

itemSize="100"

Теперь в журнале вывода я вижу:

end is 5 total is 20
end is 5 total is 20
end is 5 total is 20
end is 7 total is 20
end is 7 total is 20
end is 9 total is 20
end is 9 total is 20
end is 9 total is 20
end is 11 total is 20
end is 13 total is 20
end is 13 total is 20
end is 15 total is 20
end is 15 total is 20
end is 17 total is 20
end is 17 total is 20
end is 17 total is 20
end is 19 total is 20
end is 20 total is 20
end reached increase page no
person Guizmo    schedule 12.08.2019
comment
спасибо, команда cdk должна была назвать его как itemSizePx, чтобы избежать путаницы - person Jithin P; 12.08.2019