Question

我有很多蔬菜=

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

我想用角度（* 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

Answer 1

您想要做的是在表数据模板中有一个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>

有没有一种方法可以在表格中使用图标而不显示数据

1 个答案: