Existe-t-il un moyen d'utiliser des icônes dans le tableau au lieu d'afficher des données

Question 1

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

html angular font-awesome

-1

SHARAD SAURAV 7 nov. 2019 à 17:55

Answer

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

Question 2

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

Existe-t-il un moyen d'utiliser des icônes dans le tableau au lieu d'afficher des données

1 réponse

De nouvelles questions

Tags associés