Angulaire 4 - changement de couleur dépend de la valeur

Je travaille avec Angulaire 4 et j'ai un problème avec style conditionnel en train de changer.
J'ai une table et des valeurs qu'il contient. J'ai besoin de valeurs dans une colonne à être changés en fonction de si la valeur est plus grande ou plus petite que zéro.
Par exemple - si la valeur est de 123, puis sa couleur doit être vert. Si la valeur est -123, puis sa couleur doit être rouge.

Il est fragment de mon code ci-dessous, mais cela ne fonctionne pas comme je voudrais:

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

Avez-vous des solutions.
Je vous remercie à l'avance.

InformationsquelleAutor bigmeister | 2017-11-22
  1. 18

    Vous pouvez utiliser ngClass pour cela. 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>

    Dans votre CSS:

    .positive {
    background-color: green;
}

.negative {
    background-color: red;
}

    Cela laissera 0 non stylé.

    Très simple Stackblitz exemple: https://stackblitz.com/edit/angular-z2hnrn

    • c'est pour moi juste les faits saillants de la cellule. est-il un moyen d'étendre cela à la ligne?
    • Assez sûr que vous pouvez le faire dans le <mat-row> élément en bas. Quelque chose comme <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'positive' : row.availableBalance > 0, 'negative' : row.availableBalance < 0}"></mat-row>
    InformationsquelleAutor mahval
  2. 5

    Utilisation ngStyle avec une méthode que l'expression. Ajoutez la méthode suivante à votre composant:

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

    Et dans l'utilisation du modèle comme expression:

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