각 4 - 값에 따라 색상이 달라집니다.

Question

저는 Angular 4를 사용하고 있으며 조건부 스타일 변경에 문제가 있습니다. 테이블과 값이 있습니다. 값이 0보다 크거나 작은 지에 따라 열의 값을 변경해야합니다. 예 : 값이 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>