Проверка бесконечной прокрутки CDK

Question

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

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

Ссылка на стекблиц https://stackblitz.com/edit/cdk-infinite-scroll-ufuewv

Answer 1

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

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