import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

private loadMoreSubject = new Subject<void>();

constructor() {
  this.loadMoreSubject.pipe(
    debounceTime(300),
    distinctUntilChanged()
  ).subscribe(() => this.loadMoreData());
}

onScroll() {
  this.loadMoreSubject.next();
}

loading = false;
allDataLoaded = false;

loadMoreData() {
  if (this.loading || this.allDataLoaded) return;

  this.loading = true;
  
  this.dataService.getData(this.currentPage).subscribe(newData => {
    if (newData.length === 0) {
      this.allDataLoaded = true;
    } else {
      this.data = [...this.data, ...newData];
      this.currentPage++;
    }
    this.loading = false;
  });
}

<cdk-virtual-scroll-viewport [itemSize]="50" (scrolledIndexChange)="onScroll()">
  <div *cdkVirtualFor="let item of data">
    {{item}}
  </div>
</cdk-virtual-scroll-viewport>

trackByFn(index: number, item: any): number {
  return item.id; // 使用唯一标识符
}

<div *cdkVirtualFor="let item of data; trackBy: trackByFn">