Angular Material Table展示嵌套列表数据出错，如何修复？

问题分析 #

你的代码存在三个关键问题：

1. 列定义重复且缺失：模板里重复定义了matColumnDef="B"，但没有定义matColumnDef="C"，与displayColumns中的C列不匹配，导致表格无法渲染C列。
2. 单元格取值逻辑错误：数据源是二维数组，每个row是一个数组元素，当前代码中matCellDef的item变量实际指向整个行数组，直接输出会显示整个数组内容，而非对应列的值。
3. 列定义与displayColumns不对应：displayColumns包含A、B、C三个列，但模板缺少C列的定义。

修正后的代码 #

组件类代码（无需修改）

displayColumns = ['A', 'B', 'C']
values = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c'],
]

模板代码（修正后）

<table mat-table [dataSource]="values" class="mat-elevation-z8">
  <!-- A列定义：对应数组索引0 -->
  <ng-container matColumnDef="A">
    <th mat-header-cell *matHeaderCellDef>A</th>
    <td mat-cell *matCellDef="let row">{{ row[0] }}</td>
  </ng-container>

  <!-- B列定义：对应数组索引1 -->
  <ng-container matColumnDef="B">
    <th mat-header-cell *matHeaderCellDef>B</th>
    <td mat-cell *matCellDef="let row">{{ row[1] }}</td>
  </ng-container>

  <!-- C列定义：对应数组索引2 -->
  <ng-container matColumnDef="C">
    <th mat-header-cell *matHeaderCellDef>C</th>
    <td mat-cell *matCellDef="let row">{{ row[2] }}</td>
  </ng-container>

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

关键修正点说明 #

• 移除重复的matColumnDef="B"，新增matColumnDef="C"的列定义，确保与displayColumns完全对应。
• 将matCellDef中的变量改为row（代表当前行的数组），通过索引row[0]、row[1]、row[2]分别获取A、B、C列对应的数据。

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