如何在Angular 7中将无限滚动与mat-table和service结合使用？

ng add @angular/material

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MyDataService } from './my-data.service';

dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

ngOnInit() {
  this.dataSource = new MatTableDataSource<any>();
  this.dataSource.paginator = this.paginator;
  this.getData();
}

getData() {
  this.myDataService.getData().subscribe((data: any[]) => {
    this.dataSource.data = data;
  });
}

<table mat-table [dataSource]="dataSource">
  <!-- 列定义 -->
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef> Column 1 </th>
    <td mat-cell *matCellDef="let element"> {{element.column1}} </td>
  </ng-container>

  <!-- 其他列定义 -->

  <!-- 列绑定 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyDataService {
  constructor(private http: HttpClient) { }

  getData() {
    // 发起HTTP请求获取数据
    return this.http.get('http://example.com/api/data');
  }
}