Angular 11 Material DataSource，无需进一步请求服务器

import { Component } from '@angular/core';
import { ArrayDataSource } from '@angular/cdk/collections';

@Component({
  selector: 'app-root',
  template: `
    <mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="age">
        <th mat-header-cell *matHeaderCellDef> Age </th>
        <td mat-cell *matCellDef="let element"> {{element.age}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </mat-table>
  `,
})
export class AppComponent {
  displayedColumns: string[] = ['name', 'age'];
  dataSource = new ArrayDataSource([
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
    { name: 'Charlie', age: 35 },
  ]);
}