Angular Material Table绑定REST API无数据，普通表格显示正常

你现在的Material Table完全显示不出数据，和接口取数逻辑无关——毕竟普通表格已经能正常拿到list_product的数据了，问题全出在Material Table的用法配置上：

• Angular Material Table 不像原生HTML表格可以靠*ngFor直接遍历组件数组渲染行，它必须通过dataSource属性显式绑定数据源，你写的<table mat-table>标签上根本没加这个绑定，组件默认读取的是空数组，自然没有任何内容输出。
• 你在单元格模板里写的*matCellDef="let x of list_product"是完全无效的写法，Material Table的行渲染逻辑会从绑定的dataSource里逐行取数，根本不会执行这里自定义的数组循环，写了也不生效。

1. 给Material Table标签补上数据源绑定，把原代码里的<table mat-table>改成：

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

2. 修正单元格模板的取值逻辑，删掉多余的数组循环写法，改成接收Material Table自动注入的行变量取值：

<!-- Position Column -->
<ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <!-- 去掉多余的of list_product，直接定义行变量即可 -->
    <td mat-cell *matCellDef="let row"> {{row.id}} </td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let row"> {{row.description}} </td>
</ng-container>

3. 优化接口取数的代码逻辑，没必要在subscribe里循环push每个数组成员，直接把接口返回的完整数组整体赋值给数据源就行，代码更简洁，也避免循环push带来的不必要的变更检测触发混乱：

get_data() {
    this.http.get("http://localhost:3000/listp").subscribe((res: any[]) => {
        // 直接整体赋值，替代原来的循环push逻辑
        this.list_product = res;
    })
}

4. 排错兜底：如果改完上面的代码还是显示异常，检查当前组件所属的Angular模块，确认已经导入了MatTableModule，没导入的话模板里的mat-*指令不会被解析，也会出现渲染失效的问题。

补充说明：如果后续需要给表格加分页、排序、过滤功能，不需要手动改现有渲染逻辑，只需要把数据源换成MatTableDataSource实例，把数组传给这个实例的data属性即可，不用动现有模板的列定义。

内容的提问来源于stack exchange，提问作者mahdi.gh