* matCellDef, * matHeaderCellDef и * ngIf в одном контейнере - PullRequest
Новая
       40

* matCellDef, * matHeaderCellDef и * ngIf в одном контейнере

0 голосов
/ 06 мая 2020

Я пытаюсь показать часть строки (которая является кнопками) моей таблицы на основе некоторого логического значения, но это работает, только если я помещаю ее на уровень кнопки.

I ' Используйте этот код: 

    <ng-container matColumnDef="myCol">
      <th class="table-column" mat-header-cell *matHeaderCellDef> myCol </th>
      <td mat-cell *matCellDef="let data">
        <button *ngIf="data.someBoolean" mat-icon-button color="warn">
          <mat-icon class="mat-18">delete</mat-icon>
        </button>
        <button *ngIf="data.someBoolean" mat-icon-button color= "warn">
          <mat-icon class="mat-18">create</mat-icon>
        </button>
      </td>
    </ng-container>

он работает, но повторяется. Размещение *ngIf="data.someBoolean" на уровне контейнера не сработало. Любые идеи, как это исправить?

1 Ответ

1 голос
/ 06 мая 2020

Вы можете уменьшить дублирование *ngIf="data.someBoolean", заключив дублированный код в ng-container: 

<ng-container matColumnDef="myCol">
  <th class="table-column" mat-header-cell *matHeaderCellDef> myCol </th>
  <td mat-cell *matCellDef="let data">
    <ng-container *ngIf="data.someBoolean"> <---------------------- common wrapper
      <button mat-icon-button color="warn">
        <mat-icon class="mat-18">delete</mat-icon>
      </button>
      <button mat-icon-button color= "warn">
        <mat-icon class="mat-18">create</mat-icon>
      </button>
    </ng-container>
  </td>
</ng-container>
...