Angular Material - Как создать строку на дочернем узле json - PullRequest
Новая
       18

Angular Material - Как создать строку на дочернем узле json

0 голосов
/ 05 июня 2018

Я пытаюсь создать строку в дочернем массиве в 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.Есть ли решение для создания строки на дочернем узле?

1 Ответ

0 голосов
/ 28 июня 2018

Пример «Таблица с расширяемыми строками»:

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

...