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

Question

我正在尝试在 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>

此代码 sn-p 正在 json 的父节点上创建一行，而我希望在子行上创建该行。

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

Answer 1

示例“带有可扩展行的表格”：

https://material.angular.io/components/table/examples