Как сделать cdk-virtual-scroll более динамичным c в angular с API

Question

вот код:

HTML

<div nz-row class="landing-content" *ngIf="infinite | async as location">
    <cdk-virtual-scroll-viewport itemSize="50" class="landing-body" (scrolledIndexChange)="nextBatch($event, (location[location.length - 1].sensor))">
      <div *cdkVirtualFor="let data of tempThermometer.value;let i = index">
        <div class="app-section" nz-col nzXs="24" nzSm="12" nzMd="12" nzXl="8" nzXXl="6">
          <div class="app-section-item">
            <div class="app-section-title">
              <label [textContent]="removeSpecialCharacter(data.sensor)"></label>
              <i nz-icon nzType="info-circle" nzTheme="outline" nz-popover
                nzTitle="{{ removeSpecialCharacter(data.sensor) + ' Details' }}" nzTrigger="click"
                [nzContent]="locationInfo" nzPlacement="leftTop" *ngIf="data.locationCode"></i>
              <ng-template #locationInfo>
                <div style="width: 300px;min-width: 230px;">
                  <div nz-row>
                    <div nz-col nzSpan="10">Location Code</div>
                    <div nz-col nzSpan="14">
                      <label [textContent]="': ' + data.locationCode"></label>
                    </div>
                  </div>
                  <div nz-row>
                    <div nz-col nzSpan="10">Location Name</div>
                    <div nz-col nzSpan="14">
                      <label [textContent]="': ' + data.sensor"></label>
                    </div>
                  </div>
                  <div nz-row>
                    <div nz-col nzSpan="10">Device Code</div>
                    <div nz-col nzSpan="14">
                      <label [textContent]="': ' + data.deviceCode"></label>
                    </div>
                  </div>
                  <div nz-row>
                    <div nz-col nzSpan="10">Device</div>
                    <div nz-col nzSpan="14">
                      <label [textContent]="': ' + removeSpecialCharacter(data.deviceDescription)"></label>
                    </div>
                  </div>
                </div>
              </ng-template>
            </div>
        </div>
      </div>
    </cdk-virtual-scroll-viewport>
  </div>

TS

      tempThermometer = new BehaviorSubject<any>([]);

pageIndex = 1;
      offset = new BehaviorSubject(null);
      batch = 4;
      infinite: Observable<any[]>;

      theEnd = false;

    getRoomList() {
        this.tempLoading = true;
        this.subscription = this.global
          .getData(`/conditions/latest?start=${pageIndex}&length=${this.batch}`)
          .pipe(take(1))
          .subscribe((res: any) => {
            this.pageTotal = res['recordsFiltered'];
            this.tempThermometer.next(Object.values(res['data'].map((obj: any) => {
              return {
                ...obj,
                spinning: true
              };
            })));
            this.tempLoading = false;

            this.infinite = this.tempThermometer.pipe(map(v => Object.values(v)));
            this.setData(this.tempThermometer.value, this.toggleUnit);
            // const data = orderBy(this.tempThermometer.value, ['date'], ['asc']);
            // this.lineChart(this.tempThermometer.value);
          });
      }

      nextBatch(e: any, offset: any) {
        if (this.theEnd) {
          return;
        }

        const end = this.viewport.getRenderedRange().end;
        const total = this.viewport.getDataLength();
        console.log(`${end}, '>=', ${total}`);
        if (end === total) {
          this.offset.next(offset);
        }
      }

      trackByIdx(i: number) {
        return i;
      }

То, что я пытаюсь сделать здесь, это то, что когда я прокручиваю, он отображает следующую партию. На моем API я добавил param start и length.

. Что я делаю, запускаю приложение, оно сначала отображает 4 данные, а при прокрутке вниз отображает следующую или следующую партию. pageIndex.

Когда я прокручиваю вниз на своем devtool и проверяю в консоли, вывод 4> = 4, он не меняется.

Как сделать его более динамичным c?