IONIC 2 保存和取消保存按钮答案

【问题标题】：IONIC 2 save and unsave buttonIONIC 2 保存和取消保存按钮
【发布时间】：2017-08-03 01:50:51
【问题描述】：

我想在我的列表中创建一个保存和取消保存图标。当我单击时，它会保存并更改图标，然后当我再次单击时，我再次单击它会再次取消保存并更改图标。

在我的 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")

我可以在点击时更改图标，但一旦更改就不能再改回来。另外，我不确定如何在保存和取消保存功能之间切换。

【问题讨论】：

标签： javascript android html angularjs ionic2

【解决方案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>

你的函数应该是：

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

【讨论】：