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 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>
De nouvelles questions
html
HTML (HyperText Markup Language) est le langage de balisage pour créer des pages Web et d'autres informations à afficher dans un navigateur Web. Les questions concernant le HTML doivent inclure un exemple reproductible minimal et une idée de ce que vous essayez d'accomplir. Cette balise est rarement utilisée seule et est souvent associée à [CSS] et [javascript].