Angular Mat Table数据源问题：表格无法渲染数据求助

问题相关代码 #

模型代码 #

export class HubxModel{ 
    xyz
}

组件代码 #

export class UserPatientsReportFormComponent implements OnInit {
    displayedColumns: string[] = ['itemTitle', 'itemValue', 'itemUnit'];
    
    hubxReportList : Array<HubxDataModel> = [];
}

补充信息：console.log(this.hubxReportList)结果及数据库表结构见附图。

核心修复步骤 #

1. 正确初始化MatTableDataSource #

Mat Table不能直接绑定普通数组，必须使用MatTableDataSource实例。补充初始化逻辑：

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

export class UserPatientsReportFormComponent implements OnInit {
    displayedColumns: string[] = ['itemTitle', 'itemValue', 'itemUnit'];
    hubxReportList : Array<HubxDataModel> = [];
    dataSource = new MatTableDataSource<HubxDataModel>(this.hubxReportList);

    ngOnInit(): void {
        // 替换为你的实际数据获取逻辑（接口请求/数据库查询）
        this.getReportData().then(data => {
            this.hubxReportList = data;
            this.dataSource.data = this.hubxReportList; // 同步更新数据源
        });
    }

    // 模拟数据获取方法
    getReportData(): Promise<HubxDataModel[]> {
        return Promise.resolve([
            { itemTitle: '血糖', itemValue: '5.3', itemUnit: 'mmol/L' },
            { itemTitle: '总胆固醇', itemValue: '4.2', itemUnit: 'mmol/L' }
        ]);
    }
}

2. 确保模型与数据结构匹配 #

当前HubxModel仅定义了xyz属性，但组件使用的是HubxDataModel，且表格依赖itemTitle/itemValue/itemUnit字段，需修正模型：

export class HubxDataModel{ 
    itemTitle: string;
    itemValue: string;
    itemUnit: string;
    // 可添加数据库返回的其他字段
}

如果数据库字段名与表格列名不一致，要么在数据处理时转换字段名，要么在模板中做映射（比如{{element.db_title}}）。

3. 模板正确绑定数据源 #

确认HTML模板中表格与数据源、列名的绑定无误：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!-- 指标名称列 -->
    <ng-container matColumnDef="itemTitle">
        <th mat-header-cell *matHeaderCellDef> 指标名称 </th>
        <td mat-cell *matCellDef="let element"> {{element.itemTitle}} </td>
    </ng-container>

    <!-- 指标数值列 -->
    <ng-container matColumnDef="itemValue">
        <th mat-header-cell *matHeaderCellDef> 指标数值 </th>
        <td mat-cell *matCellDef="let element"> {{element.itemValue}} </td>
    </ng-container>

    <!-- 单位列 -->
    <ng-container matColumnDef="itemUnit">
        <th mat-header-cell *matHeaderCellDef> 单位 </th>
        <td mat-cell *matCellDef="let element"> {{element.itemUnit}} </td>
    </ng-container>

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

4. 验证数据加载状态 #

查看console.log(this.hubxReportList)输出：

• 确认数组不为空，且每个元素都包含itemTitle/itemValue/itemUnit字段
• 异步获取数据时，必须在数据返回后更新dataSource.data，仅修改原数组不会触发表格刷新

内容的提问来源于stack exchange，提问作者Manipuri Vlogs