angular - 如何在 Angular 中检查 mat-cell 是否为空

Question

我是 Angular 的初学者，我在mat-table中显示我的用户列表数据，我的要求是我想检查mat-cell是否为空，如果只是空的话，我想显示“无价值”。

我为我的要求编写了下面的代码，但我遇到了异常。

<ng-container matColumnDef="email">
  <th mat-header-cell *matHeaderCellDef>Email</th>
  <td mat-cell *matCellDef="let element" *ngIf="element.email;else defaultValue">
    {{element.email}}
  </td>
  <ng-template #defaultValue>
    No value
  </ng-template>
</ng-container>

Answer 1

您不能在一个元素上使用两个结构指令，因此请考虑以下解决方案：

<td mat-cell *matCellDef="let element"> 
  <ng-container *ngIf="element.email; else defaultValue">
    {{element.email}}
  </ng-container>
</td>
<ng-template #defaultValue>
  No value
</ng-template>

Answer 2

这对我有用，我希望它对你有用！

<ng-container matColumnDef="email">
  <th mat-header-cell *matHeaderCellDef>Email</th>
  <td mat-cell *matCellDef="let element">
    <ng-container *ngIf="element.email; else defaultValue">
      {{element.email}}
    </ng-container>
    <ng-template #defaultValue>
    </ng-template>
  </td>
</ng-container>