在angular 9中刷新mat-table

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';

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

  @ViewChild(MatSort, {static: true}) sort: MatSort;

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

  ngOnInit() {
    this.dataSource.sort = this.sort;
    // 调用获取数据的方法，将数据赋值给dataSource
    this.getData();
  }

  getData() {
    // 从后端获取数据，并将数据赋值给dataSource
    // 示例代码：
    this.yourService.getData().subscribe(data => {
      this.dataSource.data = data;
    });
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

<table mat-table [dataSource]="dataSource" matSort>

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

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

  <ng-container matColumnDef="column3">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Column 3 </th>
    <td mat-cell *matCellDef="let element"> {{element.column3}} </td>
  </ng-container>

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