Angular Материал таблицы Dynami c Столбцы - PullRequest
0 голосов
/ 27 февраля 2020

Я создал компонент таблицы матов, который генерирует динамические c столбцы по данным, которые я вставил, но без значков действий.

    <table mat-table [dataSource]="data" class="mat-elevation-z8">

      <ng-container [matColumnDef]="item.columnDef" *ngFor="let item of columns; let i = index">
        <th mat-header-cell *matHeaderCellDef>{{ item.header }}</th>
        <td mat-cell *matCellDef="let element">{{ element[item.columnDef] }}</td> 
      </ng-container>

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

Данные вставляются Input () из другого компонента.

    columns: Column [] = [
    {columnDef: 'faculty_id', header: 'ID'},
    {columnDef: 'faculty_name', header: 'Faculty'},
    {columnDef: 'faculty_description', header: 'Description'},
    {columnDef: 'action', header: 'Дії', actions: [
      {type: tableActionsType.Edit, icon: 'edit', matTooltip: 'Edit'},
      {type: tableActionsType.Delete, icon: 'delete', matTooltip: 'Delete'}
    ]}
  ];
  • Что мне нужно:

Я хочу создать столбец Действия со значками,

  • Проблема:

Мне нужно проверить это l oop *ngFor="let item of columns; при item.columnDef === 'action' и отрисовать mat- icon

    <ng-container [matColumnDef]="item.columnDef" *ngFor="let item of columns; let i = index">
    <th mat-header-cell *matHeaderCellDef>{{ item.header }}</th>
    <td mat-cell *matCellDef="let element">

      // if item.columnDef == 'action' then mat-icon
      // else  {{ element[item.columnDef] }}

       <mat-icon aria-hidden="false" aria-label="edit" *ngFor="let icon of item.actions" [matTooltip]="icon.matTooltip" (click)="check()">{{icon.icon}}</mat-icon>

      </td>
  </ng-container>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...