Question

我是编码的新手，当用户单击它时，我需要将“ add”图标替换为“ add-circle”图标。请帮我。以下是我的ts文件中的addToCart方法，我必须在此处添加什么才能正确替换？请帮助我

  <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>
          Courses
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-item *ngFor="let item of courseList">
          <ion-thumbnail slot="start">
            <img [src]=item.picture>
          </ion-thumbnail>
          <ion-label>
          <h2>{{item.title}}</h2>
          <p> {{item.price | currency}}</p>
          <ion-button size="small" id="adding" (click)=addToCart(item)>
            <ion-icon slot="icon-only" name="add"></ion-icon>
          </ion-button>
        </ion-label>
        </ion-item>
      </ion-list>


    </ion-content>

  async addToCart(item: Course) {
    this.cartService.add(item);
    const toast = await this.toastController.create({
      message: item.title + ' added to compare',
      duration: 2000,
      position: 'top',
      color: 'secondary'
    });
    toast.present();    
  }

}

Answer 1

声明一个具有图标名称的变量

 public icon: string;

并在构造函数中初始化icon变量

  constructor() {
    this.icon = 'add';
    });
  }

并在addToCart()方法中分配新的添加圆圈图标

addToCart(item){
  this.icon ="add-circle"
}

最后是html文件

<ion-icon name="{{icon}}"></ion-icon>

Live Demo

Answer 2

HTML文件

<ion-icon [name]="addCircleIcon" (click)='addCircle()'></ion-icon>

为变量声明图标名称：

addCircleIcon: string = 'add-icon';

click（）函数：

addCircle() {
             this.addCircleIcon = this.addCircleIcon === 'add-icon' ? 'add-icon-circle' : 'add-icon';
            }

用户单击时将“添加”图标更改为“添加圆圈”图标

2 个答案: