Таблица угловых данных

Question

export class User {
    fname: string;
    lname: string;
    email: string;
    mobile: string;
    password: string;
    roles: Array<{
    name: string
  }>;
}

JSON Object

{
        "email": "multiUser@mail.com",
        "mobile": "9895276034",
        "fname": "test",
        "lname": "User",
        "password": "secret",
        "roles": [
            {
                "name": "accounts"
            },
            {
                "name": "ADMIN"
            }

Мой HTML

<ng-container matColumnDef="roles">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Roles</th>

  <td mat-cell *matCellDef="let data ">{‌{data.roles[0].name}}</td>

</ng-container>

Здесь есть две роли. Первая роль (т.е. учетные записи я получаю, как указано выше). Как мне добраться до второй роли здесь (то есть: «ADMIN» с помощью цикла.)

Пожалуйста, помогите

Answer 1

Я ожидаю, что вы хотите roles.name в разных строках здесь?Директива ngFor используется для циклического перемещения по списку в угловом формате.Ниже приведен фрагмент с использованием ngFor.

<ng-container matColumnDef="roles">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Roles</th>
    <tr *ngFor="let role of data.roles">
        <td mat-cell *matCellDef="let data ">{‌{role.name}}</td>
    </tr>
</ng-container>