角4 - 値に応じて色が変わります

Question

私は角度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を使用できます。あなたのCSSで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> 

：表現の方法と

.positive { 
    background-color: green; 
} 

.negative { 
    background-color: red; 
} 

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