スイッチのアイコンをクリック

Question

後、私はアイテムのリストを持って、各項目はion-icon

<ion-list> 
     <ion-item *ngFor="let item of items"> 
      <ion-avatar item-left> 
      <img src="{{item.logo}}" /> 
      </ion-avatar> 

      <h2>{{item.name}}</h2> 

      <button clear (click)="changeIcon(shop)" item-right> 
        <ion-icon name="ios-heart-outline" ></ion-icon> 
      </button> 
     </ion-item> 
    </ion-list> 

とボタンがあり、私はボタンをクリックした後ios-heartには、このアイコンを変更したいです。

あなたのビューで：あなたのコード内

<ion-icon [name]="myIcon"></ion-icon> 

そして：

export class MyFirstPage { 
    // use the home icon 
    myIcon: string = "home"; 
} 

あなたはこのように変数を使用してアイコンを設定することができますIonic2 docsで見ることができます同じよう

Answer 1

あなたの場合は、配列内の各要素にアイコン名を追加します。

public items: [] = [ 
    { 
    "logo" : "...", 
    "name" : "...", 
    "iconName" : "ios-heart-outline" 
    }, 
    //... 
]; 

は、その後、あなたのビューでは、私はこのコードの一部を変更するD」：

<button clear (click)="changeIcon(item)" item-right> 
    <ion-icon [name]="item.iconName" ></ion-icon> 
</button> 

を今はitemを受けるchangeIcon()方法で私たちがしなければならないすべてはの名前を変更していることに注意してくださいこのようなアイコン：

public changeIcon(theItem): void { 
    theItem.iconName = "ios-heart"; 
}