【问题标题】:Switch icon in ionic2 after click点击后在ionic2中切换图标
【发布时间】:2016-11-27 07:10:22
【问题描述】:

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

【问题讨论】:

    标签: angular typescript ionic2 ionic3


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

    【讨论】:

      猜你喜欢
      • 2016-11-22
      • 2018-08-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多