Есть ли способ, с помощью которого я могу использовать значки внутри таблицы вместо отображения данных - PullRequest
Новая
       8

Есть ли способ, с помощью которого я могу использовать значки внутри таблицы вместо отображения данных

0 голосов
/ 07 ноября 2019

У меня есть массив овощей = 

[
  {"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}
]

Я хочу отобразить его в таблице, используя angular (* ngFor), как показано ниже, с крестиком для значений 0 и галочкой для ненулевого значения вместе сзначение.

Мой текущий код для таблицы: - 

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

Способ отображения: - 

                   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 Ответ

0 голосов
/ 07 ноября 2019

То, что вы хотите сделать, это иметь if / else в шаблоне данных вашей таблицы, когда значение равно 0, а когда нет: 

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