在 mat-table - Angular 的 mat-cell 内实现 if else 条件 5

Question

我正在尝试在我的 angular 应用程序中的 mat-table 的 mat-cell 中实现 if else 条件。但是我从控制台收到错误 "ERROR Error: StaticInjectorError(AppModule)[NgIf -> TemplateRef]: "

我的密码是

<ng-container matColumnDef="role">
    <mat-header-cell *matHeaderCellDef>Role</mat-header-cell>        
    <mat-cell *matCellDef="let user" ngIf="{{user.roles.length == 1}}">
        Admin          
    </mat-cell>
  </ng-container>

非常感谢任何帮助。

Answer 1

你有 ngIf，但它应该以星号为前缀：*ngIf

此外，使用像 *ngIf 这样的绑定指令属性，您不需要在其中使用大括号。只做 *ngIf="user.roles.length == 1" 应该没问题。

然而，通常你不能在同一个带星号的元素上有两个指令，所以使用另一个 <ng-container> 可能是解决这个问题的方法：

<ng-container matColumnDef="role">
  <mat-header-cell *matHeaderCellDef>Role</mat-header-cell>
  <ng-container *ngIf="user.roles.length == 1">
    <mat-cell *matCellDef="let user" >
      Admin          
    </mat-cell>
  </ng-container>
</ng-container>

Answer 2

您可以使用 class 将显示设置为 none 并且会成功

<ng-container matColumnDef="role">
<mat-header-cell *matHeaderCellDef>Role</mat-header-cell>        
<mat-cell *matCellDef="let user" [ngClass]="'hide':user.roles.length == 1">
    Admin          
</mat-cell>

并在您的样式表文件中

.hide {
  display: none;
}

Answer 3

我遇到过同样的问题。我想出了以下解决方案。

您可以按如下方式使用[ngClass]。

  <tr mat-footer-row [ngClass]="dataSource.length==0 ? 'hide' : ''" *matFooterRowDef="displayedColumns1"></tr>

或者如果你想隐藏一些单元格，你可以使用 [hidden] 属性。就像 CSS "display: none" 属性.

  <tr mat-footer-row [hidden]="dataSource.length==0" *matFooterRowDef="displayedColumns1"></tr>

Answer 4

添加包装器 ng-container 实现了在父容器上获取 user 对象并在子容器中使用该 paren 访问变量的技巧 *ngIf.


    <ng-container matColumnDef="role">
      <th *matHeaderCellDef mat-header-cell>Role</th>
      <td *matCellDef="let user" mat-cell>
        <ng-container *ngIf="user.roles.length == 1;else conditionNotMet">
          Admin (Condition is met)
        </ng-container>
      </td>

      <ng-template #conditionNotMet>
        What ever logic...
      </ng-template>
    </ng-container>

在 mat-table - Angular 的 mat-cell 内实现 if else 条件 5

Implementing if else condition inside a mat-cell of a mat-table - Angular 5

angularjs

typescript

angular5

mat-table