在 mat-cell 中应用 ngclass 出现错误 angular 8

apply ngclass in mat-cell getting error angular 8

我正在尝试使用 ngclass 来为下面的 html 代码应用 css 但它显示错误。

我想使用两个 class,即 colorRed 和 colorOrange

这是我的两个class (CSS)

    .colorRed{
        color:red;
    }
    .colorOrange{
        color: orange;
    }

这是条件

  1. 如果百分比 >=5% 且 <10%,则显示橙色
  2. 如果百分比>=10%需要显示红色

这是我的html

    <ng-container matColumnDef="salaryIncrease">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> </th>
     <td mat-cell [ngClass]="{'colorRed': element.salaryIncrease>= 5% }" *matCellDef="let element" > {{element.salaryIncreas| currency:'':''}}
     </td>
    </ng-container>     

您收到模板解析错误,因为您在比较期间使用了 % 符号,而 % 符号不能用于比较。只需比较百分比值。

同样在标准场景中,只存储百分比值的值。 % 符号仅在需要的地方添加

适合您的工作示例

https://stackblitz.com/edit/angular-5fbpjc?embed=1&file=app/table-basic-example.html