J'ai un tableau en Angular qui montre une liste d'articles avec des prix. les prix sont triés à partir de la base de données donc toujours le prix le plus bas sera toujours premier. Je veux styliser différemment (couleur verte) la première ligne de la colonne du montant de l'offre (toutes les autres lignes sont rouges par défaut, il me suffit donc de styliser la première). Une autre question est que je dois afficher la différence entre l'offre la plus basse et les autres offres (ajoutera une image pour que cela soit plus clair) lien stackblitz: https://stackblitz.com/edit/angular-lxngez résultat désiré: https://imgur.com/a/TpJwHuW
J'ai essayé d'ajouter ngClass différemment pour le premier index d'enchère. Prix total mais cela n'a pas fonctionné:
<td [ngClass]="{'green-text': bid.TotalPrice[0]}">{{ bid.TotalPrice | currency }}</td>
J'ai ajouté une image pour le résultat souhaité (2 choses dont j'ai besoin pour obtenir le style différent et la différence entre le prix le plus bas et le autres prix.
5 Réponses :
Pour la couleur, vous pouvez le faire uniquement en css. Vous pouvez ajouter une classe .price à la cellule du tableau et ajouter une règle, qui sélectionne la première ligne du tableau et remplace la couleur de la cellule de prix
Dans le modèle:
<td style="color: red" class="price input-text">{{ bid.TotalPrice | currency }}
<span *ngIf="i === 0"> Lowest price.</span>
<span *ngIf="i > 0"> {{bid.TotalPrice - auctionBidsData.auctionBids[0].TotalPrice | currency}}</span>
</td>
Dans css:
#tableSortExample tbody tr:first-of-type .price {
color: green!important;
}
Concernant le prix vous pouvez simplement ajouter un intervalle conditionnel dans le cas du prix le plus bas et dans les autres cas
<td style="color: red" class="price input-text">{{ bid.TotalPrice | currency }}</td>
fonctionne très bien mais nouveau problème que je rencontre maintenant que je peux filtrer la table et toujours le premier champ est vert et maintenant je vois que cette approche n'est pas bonne car j'ai besoin de styliser différemment l'élément le plus bas et non le premier élément: imgur.com/a/B39smeU parce qu'après avoir filtré la table, le prix le plus élevé obtient la couleur verte
dans ce cas, vous pouvez stocker l'indice du prix le plus bas lors de la réorganisation dans le composant et appliquer des styles et des calculs basés sur cet indice. vous devrez changer le sélecteur css (qui cible le premier enfant) et faire un ngstyle ou ngclass sur la ligne avec le prix le plus bas
Utilisez ngClass comme ceci:
<td [ngClass]="{ low: i == 0, high: i > 1, other: condition(item, i) }">ABC</td>
Cela ajoutera la classe low pour la première classe d'index high pour tout ce qui est au-dessus de la deuxième ligne et de la classe other pour ceux dont la condition est évaluée à true.
Utilisez simplement ces classes pour styliser en conséquence. exemple
p >
Vous pouvez le faire comme ci-dessous en utilisant HTML[ngClass final..lowest {
color: green !important;
font-weight: bold;
}
Essayons ceci (implémentation angulaire pure):
HTML
<td style="color: red" class="input-text"
[ngClass]="{ 'price-input-text': 'i == 0' }"
[ngStyle]="{color: i == 0 ? 'green' : 'red'}">
{{ bid.TotalPrice | currency }}
<small *ngIf="i == 0">Lowest price</small>
</td>
fonctionne très bien mais nouveau problème que je rencontre maintenant que je peux filtrer la table et toujours le premier champ est vert et maintenant je vois que cette approche n'est pas bonne car j'ai besoin de styliser différemment l'élément le plus bas et non le premier élément: imgur.com/a/PapQO9O parce qu'après avoir filtré la table, le prix le plus élevé obtient la couleur verte
Dans ce cas, utilisez la classe css au lieu de l'index, mais vous devrez déterminer quel est le prix le plus bas en utilisant JS sur le composant et probablement marquer cet élément.
Trouvez la valeur minimale en utilisant réduire
[style.color]="{bid.totalPrice==minPrice?'green':null"}
et utilisez-la dans le td
this.minPrice=this.auctionBidsData.auctionBids.reduce(
(min,b)=>min<b.TotalPrice?min:b.TotalPrice,
this.auctionBidsData.auctionBids[0].TotalPrice)
essayez d'ajouter des styles aux lignes et étendez les styles comme vous le souhaitez stackblitz.com/edit/angular-ckecfw