我正在使用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>
你有任何解决方案吗? 提前谢谢。
答案 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>