mat-table不填充来自http请求的数据

<!-- 组件的HTML模板 -->
<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-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

// 组件的Typescript代码
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatTableDataSource } from '@angular/material/table';

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

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('http://example.com/api/data').subscribe((data: any[]) => {
      this.dataSource = new MatTableDataSource(data);
    });
  }
}