Angular Material Table不显示值：同源posts在mat-accordion可正常展示

你当前的表格完全不渲染内容，和posts数据本身没有关系——这也和你观察到的“同一批数据在手风琴组件中可正常展示”的现象完全吻合。问题根源是缺失了Angular Material表格的两项必需配置：

• 未声明表格的列展示映射集合：mat-table不会自动识别、渲染模板里所有matColumnDef片段，必须通过[displayedColumns]属性传入需要渲染的列名数组，明确告诉表格要加载哪些列的内容。
• 未配置表头行、数据行的渲染规则：仅定义列的单元格模板不足以生成完整表格，必须通过对应指令指定表头行、数据行的列映射，否则表格没有可挂载的行DOM结构，自然无法把数据源内容渲染为可视表格。

修正方案 #

1. 在组件类中补充列名定义，和已有的posts属性放在同级位置即可，列名要和之前写的matColumnDef名称一一对应：

   displayedColumns: string[] = ['name', 'company', 'type', 'quantity'];
   

2. 修改模板中的表格部分，补上缺失的绑定和行渲染指令，你原本写的所有ng-container列定义片段可以直接保留，不需要改动：

   <table 
     mat-table 
     [dataSource]="posts"
     [displayedColumns]="displayedColumns" 
     class="mat-elevation-z8" 
     *ngIf="posts.length > 0"
   >
     <!-- 原有列定义完全保留 -->
     <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef> Name. </th>
       <td mat-cell *matCellDef="let element"> {{element.name}} </td>
     </ng-container>
   
     <ng-container matColumnDef="company">
       <th mat-header-cell *matHeaderCellDef> Company </th>
       <td mat-cell *matCellDef="let element"> {{element.company}} </td>
     </ng-container>
   
     <ng-container matColumnDef="type">
       <th mat-header-cell *matHeaderCellDef> Type </th>
       <td mat-cell *matCellDef="let element"> {{element.type}} </td>
     </ng-container>
   
     <ng-container matColumnDef="quantity">
       <th mat-header-cell *matHeaderCellDef> Quantity </th>
       <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
     </ng-container>
   
     <!-- 新增缺失的行渲染规则 -->
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
   

补充说明 #

直接把posts数组作为dataSource绑定可以正常工作。如果后续需要实现分页、排序、过滤等高级能力，再把数据封装为MatTableDataSource实例替换绑定值即可，这不是当前渲染失败的核心原因。

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