Html 显示完整数据但仅显示一列标题的角垫表

我正在尝试按如下方式设置动态表：

Typescript

export class TestTableComponent implements OnInit {
  data = DATA1;
  displayedColumns = Object.keys(this.data[0]);  
}

const DATA1 = [
  {iid: 11131, shortname: 'AOCS', actval: ""},
  {iid: 225124, shortname: '|--El1', actval: ""},
  {iid: 35412, shortname: '|--|--El1.2', actval: "1"},
  {iid: 456512, shortname: '|--|--El2.1', actval: "2"},
  {iid: 55512, shortname: '|--El2', actval: ""},
  {iid: 62111, shortname: '|--|--El2.1', actval: "3"},
  {iid: 72334, shortname: '|--|--El2.2', actval: "4"},
];

Html:

        
        <table mat-table [dataSource]="data" class="table">
            <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
                <th mat-header-cell *matHeaderCellDef> {{column}} </th>
                <td mat-cell *matCellDef="let emp"> {{emp[column]}} </td>
            </ng-container>
            <ng-container>
                <tr mat-header-row *matHeaderRowDef="['iid']"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </ng-container>
        </table>

{{column}}
{{emp[列]}

当表格显示时，出于某些原因，它只显示一个标题：

---

我做错了什么？

这里有一个正确的语法

<table mat-table [dataSource]="data" class="table">
   <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let emp"> {{emp[column]}} </td>
   </ng-container>

  <!-- No need for wrapping in ng-container -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <!-- You have added only ['iid'] to display-->
  <!-- What columns to display and in what order will be decided based on the above array -->
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

{{column}}
{{emp[列]}

显示问题是因为这行代码：

<tr mat-header-row *matHeaderRowDef="['iid']"></tr> 

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>