使用mat-paginator和mat-table，并使用可观察数组作为数据源

import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';

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

  <ng-container matColumnDef="column2">
    <mat-header-cell *matHeaderCellDef>列2</mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element.column2 }}</mat-cell>
  </ng-container>

  <!-- 表格行定义 -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css']
})
export class MyTableComponent implements OnInit {
  dataSource: MatTableDataSource<any>;
  displayedColumns: string[] = ['column1', 'column2'];

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit() {
    // 假设data是一个可观察数组，包含要显示的数据
    const data: Observable<any[]> = this.getData();
    data.subscribe((result) => {
      this.dataSource = new MatTableDataSource<any>(result);
      this.dataSource.paginator = this.paginator;
    });
  }

  getData(): Observable<any[]> {
    // 返回一个可观察数组，用于获取数据
    // 这里可以使用HttpClient从后端获取数据
    return null;
  }
}