mat-table不会被来自restservice的数据填充

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-table-component',
  template: `
    <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>

      <!-- 列配置 -->
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  `
})
export class TableComponent {
  dataSource: MatTableDataSource<any>;
  displayedColumns: string[] = ['name']; // 列名

  constructor() {
    this.dataSource = new MatTableDataSource<any>();

    // 从restservice获取数据，假设获取到的数据是一个数组
    const dataFromRestService = [{ name: 'John' }, { name: 'Jane' }];

    // 将数据赋值给数据源
    this.dataSource.data = dataFromRestService;
  }
}