J'ai une gamme de légumes =
[
{"day":"sunday", "tomatos": 5, "potatos": 3, "okra": 3, "total" : 11},
{"day":"monday", "tomatos": 0, "potatos": 2, "okra": 1, "total" : 3},
{"day":"tuesday", "tomatos": 0, "potatos": 0, "okra": 0, "total" : 0}
]
Je veux l'afficher dans un tableau en utilisant angulaire (* ngFor) comme indiqué ci-dessous avec une croix pour les valeurs 0 et cochez pour non zéro avec la valeur.
Mon code actuel pour la table: -
<table>
<thead>
<tr>
<th>days</th>
<th>tomatos</th>
<th>potatos</th>
<th>okra</th>
<th>total</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of vegetables">
<td>{{data.days}}</td>
<td>{{data.tomatos}}</td>
<td>{{data.potatos}} </td>
<td>{{data.total}} </td>
</tr>
</tbody>
</table>
Je veux qu'il affiche: -
days tomatos potatos okra total
sunday (Tick)5 (Tick)3 (Tick)3 (Tick)11
monday X (Tick)2 (Tick)1 (Tick)3
tuesday X X X X
-1
SHARAD SAURAV
7 nov. 2019 à 17:55
1 réponse
Meilleure réponse
Ce que vous voulez faire, c'est avoir un if / else dans votre modèle de données de table pour quand la valeur est 0 et quand elle ne l'est pas:
<td>
<div *ngIf="data.tomatoes === 0; then showCross else showTick"></div>
<ng-template #showCross>
<i class="icon-cross-class"></i>
</ng-template>
<ng-template #showTick>
<i class="icon-tick-class"></i>{{ data.tomatoes }}
</ng-template>
</td>
1
David Meza
7 nov. 2019 à 16:54