前端之家

  1. 首页
  2. 问答

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

• 问答

我有很多蔬菜= 

[
  {"day":"sunday","tomatos": 5,"potatos": 3,"okra": 3,"total" : 11},{"day":"monday","tomatos": 0,"potatos": 2,"okra": 1,"total" : 3},{"day":"tuesday","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
s20072290 回答：有没有一种方法可以在表格中使用图标而不显示数据

您想要做的是在表数据模板中有一个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>
angularfont-awesomehtml
本文链接：https://www.f2er.com/3143845.html

大家都在问