2

我正在尝试在我的角度应用程序中的 mat-table 的 mat-cell 内实现 if else 条件。但我从控制台收到错误“错误错误：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>

任何帮助深表感谢。

4

4 回答 4

2

你有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>
于 2019-01-09T18:31:00.540 回答
2

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

  1. 您可以[ngClass]如下使用。
  <tr mat-footer-row [ngClass]="dataSource.length==0 ? 'hide' : ''" *matFooterRowDef="displayedColumns1"></tr>
  1. 或者如果你想隐藏一些单元格，你可以使用[hidden]属性。这就像 CSS“显示：无”属性。
  <tr mat-footer-row [hidden]="dataSource.length==0" *matFooterRowDef="displayedColumns1"></tr>
于 2020-11-03T12:19:03.527 回答
1

添加包装器可以在父容器上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>
于 2021-12-19T08:47:31.700 回答
0

您可以使用一个类将显示设置为无，这样就可以了

<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;
}
于 2020-04-02T11:21:29.587 回答