Angular Material - 如何在json的子节点上创建行

我试图在Angular Material中的子数组上创建行 . 如果我没有json的层次结构，这似乎很简单 . 我想在材料表中显示图像，我想在其中有四列，其中我想在第一列中显示蛋糕的名称和类型，在第二列中显示图像，第三列和第四列中的描述将用于评论目的用户可以对该项目发表评论 . 这是我的json：

[
  {
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "width": 200,
    "height": 200,
    "image": [
        {
            "url": "images/0001.jpg",
            "description": "Black Forest Gateau"
        },
        {
            "url": "images/0002.jpg",
            "description": "Eggless Truffle Cake"
        },
        {
            "url": "images/0003.jpg",
            "description": "Mango Meringue Cake"
        },
        {
            "url": "images/0004.jpg",
            "description": "Oreo Cheesecake"
        }
    ]
  },
  {
    "id": "0002",
    "type": "cookie",
    "name": "sugar cookie",
    "width": 200,
    "height": 200,
    "image": [
        {
            "url": "images/0001.jpg",
            "description": "Chocolate Chip Cookies"
        },
        {
            "url": "images/0002.jpg",
            "description": "Chocolate Cookies."
        },
        {
            "url": "images/0003.jpg",
            "description": "Oatmeal Chocolate Chip Cookies"
        },
        {
            "url": "images/0004.jpg",
            "description": "Peanut Butter Cookies"
        }
    ]
  }
]

我在这里定义表格行

<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
  <ng-container matColumnDef="Detail">
    <mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
    <mat-cell *matCellDef="let data">
      <strong>{{data.type}} </strong>&nbsp;
      <span>{{data.name}}</span>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Image">
    <mat-header-cell *matHeaderCellDef> Image </mat-header-cell>
    <mat-cell *matCellDef="let data">
      <div *ngFor="let image of data.image">
        <img height="data.height" width="data.width" src="image.url" alt="image.description" />
      </div>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Description">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let data">
      <div *ngFor="let image of data.image">
         {{image.description}}
      </div>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Comment">
    <mat-header-cell *matHeaderCellDef> Comment </mat-header-cell>
      <mat-cell *matCellDef="let data">
      <div *ngFor="let image of data.image">
        <div layout-gt-sm="row">
          <mat-form-field class="example-full-width">
            <input matInput placeholder="Comment on your favorite food " value="">
          </mat-form-field>
        </div>
      </div>
    </mat-cell>
  </ng-container>

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

此代码段在json的父节点上创建一行，而我希望在子行上创建行 .

我究竟做错了什么？似乎我需要在 *matRowDef 中定义，但我无法这样做 . 我试过 let row of data.image . 是否有在子节点上创建行的解决方案？