如何在angular 5+中使用无限滚动？

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

data: any[] = [];

constructor(private http: HttpClient) { }

ngOnInit() {
  this.loadData();
}

loadData() {
  this.http.get('your_api_url').subscribe((response: any) => {
    this.data = response;
  });
}

<div *ngFor="let item of data">
  <!-- 显示数据内容 -->
</div>

<div class="scroll-container" (scroll)="onScroll()">
  <div *ngFor="let item of data">
    <!-- 显示数据内容 -->
  </div>
</div>

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

  if (scrollHeight - scrollTop === clientHeight) {
    // 当滚动到底部时加载更多数据
    this.loadMoreData();
  }
}

loadMoreData() {
  this.http.get('your_api_url').subscribe((response: any) => {
    this.data = this.data.concat(response);
  });
}