单击后在ionic2中切换图标 [英] Switch icon in ionic2 after click

问题描述

我有项目列表，每个项目都有按钮 ion-icon

I have list of item, each of items has button with ion-icon

<ion-list>
        <ion-item *ngFor="let item of items">
          <ion-avatar item-left>
            <img src="{{item.logo}}" />
          </ion-avatar>

          <h2>{{item.name}}</h2>

            <button clear (click)="changeIcon(shop)" item-right>
                    <ion-icon name="ios-heart-outline" ></ion-icon>
            </button>
        </ion-item>
    </ion-list>

我想将此图标更改为 ios-heart 点击按钮后。

and I want to change this icon to ios-heart after click on button.

推荐答案

就像你可以在 Ionic2 docs 你可以使用这样的变量设置图标：

Just like you can see in Ionic2 docs you can set the icon using a variable like this:

In您的观点：

<ion-icon [name]="myIcon"></ion-icon>

然后在你的代码中：

export class MyFirstPage {
  // use the home icon
  myIcon: string = "home";
}

所以在你的情况下，我会为每个元素添加图标名称数组

So in your case, I'd add the icon name to each element in the array

public items: [] = [
  {
    "logo" : "...",
    "name" : "...",
    "iconName" : "ios-heart-outline"
  },
  //...
];

然后在您的视图中，我将更改此部分代码：

Then in your view, I 'd change this part of the code:

<button clear (click)="changeIcon(item)" item-right>
  <ion-icon [name]="item.iconName" ></ion-icon>
</button>

请注意，现在在 changeIcon（）方法我们收到项所以我们所要做的就是更改图标的名称，如下所示：

Please notice that now in the changeIcon() method we receive the item so all we have to do is changing the name of the icon like this:

public changeIcon(theItem): void {
    theItem.iconName = "ios-heart";
} 

这篇关于单击后在ionic2中切换图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！