角度4 - 根据值改变颜色

时间:2017-11-22 11:42:14

标签: angular

我正在使用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>

你有任何解决方案吗? 提前谢谢。

2 个答案:

答案 0 :(得分:18)

您可以使用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

答案 1 :(得分:5)

将ngStyle与方法一起用作表达式。将以下方法添加到组件中:

public getColor(balance: number): string{
   return balance > 0 ? "green" : "red";
}

在模板中使用它作为表达式:

<mat-cell *matCellDef="let row" *ngIf="row.availableBalance > 0" [ngStyle]="{'color': getColor(row.availableBalance)}"> {{row.availableBalance}}
</mat-cell>