Question

简要说明：

我在home.html上放了一个图标，我也有一些图标列表。我只想用我从列表中选择的图标替换图标。以下是我的 home.html 代码

<ion-item>
<!--Replace below icon by selecting icon from below ion-list -->
        <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
      </ion-item>

  <ion-list>
    <ion-item>
      <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-1"></i> Battery Level 1
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-2"></i> Battery Level 2
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-3"></i> Battery Level 3
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
    </ion-item>
  </ion-list>

我必须使用DOM清理程序进行一些HTML动态操作，如果这需要home.ts方面的JS / jQuery方式，那就没问题了。

Answer 1

组件方：

battery_level = 'empty'

模板面：

<ion-item>
    <i class="fa fa-battery-{{battery_level}}" 
    [ngStyle]="{'color': battery_level=='empty' ? 'red' : battery_level=='4' ? 'green' : 'black' }"
    ></i> Battery Level {{battery_level}}
</ion-item>

<ion-list>
    <ion-item (click)='battery_level = "empty"'>
        <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
    </ion-item>
    <ion-item (click)='battery_level = "1"'>
        <i class="fa fa-battery-1"></i> Battery Level 1
    </ion-item>
    <ion-item (click)='battery_level = "2"'>
        <i class="fa fa-battery-2"></i> Battery Level 2
    </ion-item>
    <ion-item (click)='battery_level = "3"'>
        <i class="fa fa-battery-3"></i> Battery Level 3
    </ion-item>
    <ion-item (click)='battery_level = "4"'>
        <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
    </ion-item>
</ion-list>

<强> WORKING DEMO

通过从列表中选择图标来更改图标

1 个答案: