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> 

其中i是在列表中的項目的索引。

在我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"; 
}