单击后在 ionic2 中切换图标

Question

我有项目列表，每个项目都有带有 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。

Answer 1

就像您在 Ionic2 docs 中看到的那样，您可以使用这样的变量设置图标：

在您看来：

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

然后在您的代码中：

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

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

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

那么在您看来，我将更改这部分代码：

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

请注意，现在在 changeIcon() 方法中我们收到 item 所以我们要做的就是像这样更改图标的名称：

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

单击后在 ionic2 中切换图标

Switch icon in ionic2 after click

typescript

ionic2

ionic3

angular