IONIC 2保存して保存しないボタン

Question

私のリストに保存および保存しないアイコンを作成したいと思います。クリックすると、アイコンが保存され、変更されます。もう一度クリックすると、再びクリックしてアイコンを保存し直します。私は、リスト内のアイテムのインデックスである私のpage.html

<ion-col> 
    <button id="heart" float-end (click)="savePost(i)" *ngIf="item.save == true"> 
     <ion-icon [name]="heartFilled[i]" id="saveHeart"></ion-icon 
    </button> 
    <button id="heart" float-end (click)="deletePost(i)" *ngIf="item.save != true" > 
     <ion-icon [name]="heartoutline[i]" id="saveHeart" ></ion-icon> 
    </button> 
</ion-col> 

で

。私page.tsで

は

savePost(i ){ 
    this.heartFilled[i]="heart-outline" 

} 


deletePost(i){ 
    this.heartoutline[i]="heart" 
} 

私はこのようなアイコン変数を開始：

this.heartoutline.push("heart-outline") 
this.heartFilled.push("heart") 

私は、クリック上のアイコンを変更するが、それらが変更されると、それらをバックに変更することはできません。また、私は保存と非保存の機能を切り替える方法がわかりません。

Answer 1

あなたの商品を変更するためにインデックスを使用しないでください。 itemオブジェクトを使用してください。 あなたの商品には、iconとsaveを保存するプロパティが必要です。それはそのようになります。

{ 
    //Some propertives 
    icon: "heart-outline", 
    save: false 
} 

をテンプレートでは、あなたはそのように実行します。

<ion-col *ngFor="let item of items"> 
    <button id="heart" float-end (click)="toggleSave(item)"> 
     <ion-icon [name]="item.icon" id="saveHeart"></ion-icon 
    </button> 
</ion-col> 

そして、あなたのfunctioncは次のようになります。

toggleSave(item){ 
    item.save = !item.save; 
    if(item.save) 
    item.icon = "heart"; 
    else item.icon = "heart-outline"; 
}