스위치 아이콘을 클릭

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이 아이콘을 변경하고 싶습니다. 보기에

:

Answer 1

그냥 당신이이 같은 변수를 사용하여 아이콘을 설정할 수 있습니다 Ionic2 docs에서 볼 수 좋아

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

그리고를 다음 코드 :

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

귀하의 경우에는 배열의 각 요소에 아이콘 이름을 추가하겠습니다.

이제 changeIcon() 방법으로 우리가 item 그래서 우리가해야 할 모든이의 이름을 변경입니다받을

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

그 통지하십시오 :보기에 그런

, 나는 코드의이 부분을 변경 거라고 아이콘은 다음과 같습니다.

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