Angular mat-table:如何以更新的资源作为响应刷新数据源？

<!-- 在 HTML 模板中使用 mat-table -->
<table 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>
</table>

// 在组件中定义数据源
import { MatTableDataSource } from '@angular/material';

export class MyComponent {
  dataSource: MatTableDataSource<any>;
  data: any[] = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Mike', age: 35 },
  ];

  constructor() {
    this.dataSource = new MatTableDataSource(this.data);
  }

  refreshDataSource() {
    // 以更新的资源作为响应刷新数据源
    // 例如，可以将新的数据赋值给数据源或者调用数据源的相应方法
    this.data = [
      { name: 'John', age: 25 },
      { name: 'Jane', age: 30 },
      { name: 'Mike', age: 35 },
      { name: 'Tom', age: 40 },
    ];
    this.dataSource.data = this.data;
    // 或者
    // this.dataSource.dataChange.next(this.data);
  }
}