Schaltersymbol in ionic2 nach Klick

Question

I Liste der Artikel haben, hat jedes der Elemente Schaltfläche mit 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> 

und ich möchte ios-heart nach Klick auf den Button auf dieses Symbol ändern.

Answer 1

Genau wie Sie in Ionic2 docs sehen können Sie das Symbol mit einer Variablen wie folgt einstellen:

Ihrer Ansicht:

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

Und dann in Ihrem Code:

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

In Ihrem Fall würde ich den Namen jedes Elements im Array

hinzufügen

Dann Ihrer Ansicht nach würde Ich diesen Teil des Codes ändern:

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

Bitte beachten Sie, dass jetzt in der changeIcon() Methode erhalten wir die item so alles, was wir tun müssen, ist den Namen der Änderungs Symbol wie folgt:

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