有没有一种方法可以让我在 table 中使用图标而不是显示数据

Question

我有一排蔬菜tables =

[
  {"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) 在 table 中显示它，如下所示，0 值打叉，非零值打勾。

我当前的 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>

我希望它显示的方式：-

                   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

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

有没有一种方法可以让我在 table 中使用图标而不是显示数据

Is there a way by which I can use icons inside table instead of showing data

html

font-awesome

angular