Angular2:如何实现滚动分页以显示数据

<div (scroll)="onScroll()">
  <div *ngFor="let item of items">
    {{ item }}
  </div>
  <div *ngIf="loading" class="loading">
    加载中...
  </div>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-scroll-pagination',
  templateUrl: './scroll-pagination.component.html',
  styleUrls: ['./scroll-pagination.component.css']
})
export class ScrollPaginationComponent implements OnInit {
  items: any[] = [];
  loading: boolean = false;

  ngOnInit() {
    this.loadMoreData();
  }

  onScroll() {
    const container = document.querySelector('div');
    const scrollHeight = container.scrollHeight;
    const scrollTop = container.scrollTop;
    const clientHeight = container.clientHeight;

    if (scrollHeight - scrollTop === clientHeight) {
      this.loadMoreData();
    }
  }

  loadMoreData() {
    this.loading = true;

    // Simulate API call or fetch data from local source
    setTimeout(() => {
      const newData = ['Item 1', 'Item 2', 'Item 3'];
      this.items.push(...newData);
      this.loading = false;
    }, 2000);
  }
}