在垫表的垫单元内实现 if else 条件 - 角度 5

Question

我正在尝试在我的角度应用程序中在垫表的垫单元内实现一个 if else 条件。但是我从控制台收到错误"错误错误：静态注入器错误（应用程序模块）[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

添加一个

包装器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>

Answer 3

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

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

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

2. 或者，如果要隐藏某些单元格，可以使用[hidden]属性。这就像CSS"display： none"属性。

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

Answer 4

您可以使用类将显示设置为无，并将解决问题

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