Angular 4 - 根据值改变颜色

Question

我正在使用 Angular 4，但我遇到了条件样式更改方面的问题。我有一张表和其中的值。我需要根据值是大于还是小于零来更改列中的值。例如:如果值为 123，则其颜色应为绿色。如果值为-123，那么它的颜色应该是红色。

下面是我的代码片段，但它并没有像我想的那样工作:

<mat-table>
    <ng-container matColumnDef="availableBalance">
      <mat-header-cell *matHeaderCellDef>Available balance</mat-header-cell>
      <mat-cell *matCellDef="let row" *ngIf="row.availableBalance > 0" [style.color]="'red'"> {{row.availableBalance}}</mat-cell>
    </ng-container>
</mat-table>

你有什么解决办法吗？提前谢谢你。

Answer 1

您可以为此使用 ngClass。 https://angular.io/api/common/NgClass

<mat-table>
    <ng-container matColumnDef="availableBalance">
      <mat-header-cell *matHeaderCellDef>Available balance</mat-header-cell>
      <mat-cell *matCellDef="let row"
         [ngClass]="{
            'positive' : row.availableBalance > 0,
            'negative' : row.availableBalance < 0
         }"
      >{{row.availableBalance}}</mat-cell>
    </ng-container>
</mat-table>

在你的 CSS 中:

.positive {
    background-color: green;
}

.negative {
    background-color: red;
}

这将使 0 保持无样式。

非常简单的 Stackblitz 示例:https://stackblitz.com/edit/angular-z2hnrn