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