Блог

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

 onScroll() {
    var inOrOut = this.selectedType.inOrOut == 'incoming' ? 1 : 0;
    if(this.selectedType.page.page !== false) {
        this.selectedType.page.page = this.selectedType.page.page   1;
        this.getMessagesForPage();
    }
}

getMessagesForPage() {
    var self = this;

    this.messageSmsService
        .getMessagesForPage(this.page)
        .subscribe(
            result => {
                self.allData[ self.selectedType.type].push(result);
            },
            error => {...})
}
  

Есть virtual-scroll . Это не прокрутка браузера (Windows). Фундаментальное отличие заключается в переписывании html по запросу. Обычно прокрутка рисует весь html, а виртуальная -видимую часть прокрутки.

Добавить в шаблон.

  <virtual-scroller 
            [items]="buffer"
            (vsUpdate)="scrollItems = $event"
            (vsEnd)="getMessagesForPage($event)">

            <div *ngFor="let item of scrollItems"> </div>

 </virtual-scroller>
  

vsEnd — это событие, когда мы достигаем «underwold».

и getMessagesForPage было изменено так.

 public getMessagesForPage(event: ChangeEvent) {
  if (event.end !== this.buffer.length-1) return;

  this.getData(this.buffer.length, 10)
      .subscribe(
         result => this.buffer = this.buffer.concat(result)
       )
    }
  

Я добавляю в буфер элементы, но я не рисую весь html в прокрутку