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

Question

我正在尝试基于某个布尔值显示表的一行（即按钮）的一部分，但只有将其放在按钮级别时，它才似乎起作用。

我有此代码：

    <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

您可以通过将重复的代码包装在*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>