*matCellDef、*matHeaderCellDef 和 *ngIf 在同一容器中

Question

我试图根据一些布尔值显示我的 table 的一行（按钮）的一部分，但它似乎只有在我将它放在按钮级别时才有效。

我有这个代码：

    <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" 放在容器级别不起作用。任何想法如何解决这一问题？

Answer 1

您可以通过将重复的代码包装在 ng-container 中来减少 *ngIf="data.someBoolean" 的重复：

<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>