Angular 4 - 根据值改变颜色答案

【问题标题】：Angular 4 - change color dependent on valueAngular 4 - 根据值改变颜色
【发布时间】：2021-01-26 11:00:26
【问题描述】：

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

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

【问题讨论】：

标签： angular

【解决方案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

【讨论】：

这对我来说只是突出显示单元格。有没有办法将其扩展到行？
很确定你可以在底部的<mat-row> 元素中做到这一点。类似<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'positive' : row.availableBalance > 0, 'negative' : row.availableBalance < 0}"></mat-row>

【解决方案2】：

将 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>

【讨论】：