Question

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

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

你的功能应该是：

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

IONIC 2保存并取消保存按钮

1 个答案: