Как зациклить объект mat-cell, который содержит массив объектов в таблице mat - PullRequest
Новая
       8

Как зациклить объект mat-cell, который содержит массив объектов в таблице mat

0 голосов
/ 04 ноября 2019

Я передал массив объектов, который внутри, имеющий массив объектов, в dataSource в таблице mat. Я не могу перебрать объект, который имеет массив объектов. 

    const roleListData = [
  {
    roleId: 1,
    role: "admin",
    description: "Testing",
    level: "1",
    roleFunctions: [
      {
        createdBy: "person-1",
        createdOn: "2019-11-04T20:02:52.345",
        updatedBy: null,
        updatedOn: null,
        segmentId: 2,
        segmentType: "Dealer",
        segmentName: "testing",
        segmentValue: "5",
        additionalInfo: null,
        active: true
      }
    ]
}
]

Ячейка таблицы для roleFunctions: 

<ng-container matColumnDef="roleFunctions">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Functions</th>
          <td mat-cell *matCellDef="let row">
            {{ item }}
          </td>
        </ng-container>

Мне нужно получить доступ к объекту roleFunction, который имеет массив объектов. Если у этого массива нет объектов, он также должен работать без проблем. потому что согласно моему требованию этот объект может содержать или не содержать массив объектов. если они присутствуют, тогда я смогу отображать информацию об объекте в этой таблице cel.

1 Ответ

0 голосов
/ 05 ноября 2019

Если я правильно понимаю, вам нужно поступить следующим образом, чтобы получить доступ к атрибуту roleFunctions внутри таблицы. 

<ng-container matColumnDef="roleFunctions">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Functions</th>
  <td mat-cell *matCellDef="let row">
    {{ row.roleFunctions }}
  </td>
</ng-container>

Если вы хотите показать все roleFunctions, вы можете сделать: 

<ng-container matColumnDef="roleFunctions">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Functions</th>
  <td mat-cell *matCellDef="let row">
    <span *ngFor="let funct of row.roleFunctions">{{func.segmentName}}</span>
  </td>
</ng-container>
...