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

mat-table是Angular框架中的一个组件，用于展示表格数据。它可以通过http请求获取数据并填充到表格中。

mat-table的使用步骤如下：

首先，确保已经安装了Angular Material库，并在项目中引入相关模块。
在组件的HTML模板中，使用mat-table标签创建表格结构，并定义表头和表体。
在组件的Typescript代码中，通过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);
    });
  }
}

在上述示例中，我们通过HttpClient发送了一个GET请求到'http://example.com/api/data'，并将返回的数据赋值给dataSource变量。然后，我们使用MatTableDataSource将数据源绑定到表格中。

mat-table的优势：