单击按钮ionic 2时更改图标

Question

我正在尝试在单击按钮时更改图标以显示隐藏内容我需要更改上下箭头图标

<button clear text-center (click)="toggle()">
 <ion-icon name="arrow-dropdown-circle"></ion-icon>
 </button>

<ion-col [hidden]="!visible" class="accountBalance animated slideInUp">
       <ion-list>
          <ion-item>
            <h3>limit</h3>
                <ion-note item-right>
                    <h2>&#x20B9; 55000.00</h2>
                </ion-note>
          </ion-item>
<ion-list></ion-col>

file.ts

visible = false;
  toggle() {
   this.visible = !this.visible;
  }

Answer 1

您可以在此处使用 *ngIf 指令来显示条件图标。

<button clear text-center (click)="toggle()">
   <ion-icon name="arrow-drop down-circle" *ngIf="!visible"></ion-icon>
   <ion-icon name="arrow-drop up-circle" *ngIf="visible"></ion-icon>
</button>

您可以使用 name 属性而不是创建两个不同的离子图标

<button clear text-center (click)="toggle()">
   <ion-icon 
       [name]="visible ? 'arrow-drop up-circle' :'arrow-drop down-circle'">
   </ion-icon>
</button>

Answer 2

您可以在 name= 属性中创建条件

<ion-icon [name]="visible ? 'arrow-dropdown' : 'arrow-dropup'"></ion-icon>

Answer 3

这花了我很长时间才找到，因为很少有用于切换图标的示例。但是，我使用了 Ionic 2 Icons Doc 并想出了这个：

ts:

class ToggleIconsPage {
    buttonIcon: string = "home";

    toggleIcon(getIcon: string) {

      if (this.buttonIcon === 'star') {
        this.buttonIcon = "home";
      }
      else if (this.buttonIcon === 'home') {
        this.buttonIcon = "star";
      }
   }
}

html:

<button #myButton ion-button icon-only (click)="toggleIcon()">
    <ion-icon [name]="buttonIcon"></ion-icon>
</button>

以我的CodePen为例。

希望对您有所帮助！

Answer 4

我需要解决这个问题，除了我的代码需要更多地以编程方式解决它，因为我添加了很多项目。最初，我尝试使用变量 visible，如上例所示。但是，由于我添加了多个项目，使用 visible 变量将打开和关闭所有项目。相反，我执行了以下操作，因为我的每个项目都有一个唯一标识符 key:

export class WhateverPage {
  private visible = []; 
...
...
...
  toggle(key) {
    var index = this.visible.indexOf(key);
    if (index > -1) {
      this.visible.splice(index, 1);
    } else {
      this.visible.push(key);
    }
  }

和

<ion-icon ios="ios-add-circle" md="md-add-circle" (click)="toggle(key)" *ngIf="!visible.includes(key)"></ion-icon> 
<ion-icon ios="ios-checkmark" md="md-checkmark" (click)="toggle(key)" *ngIf="visible.includes(key)"></ion-icon>

Answer 5

这也许有帮助。我正在使用 (Ionic 5);

a.ts

  //declare this globally
  fieldTextType: boolean;

  toggleFieldTextType(){
    this.fieldTextType = !this.fieldTextType;
  }

a.html

<ion-row class="ion-padding">
  <ion-input formControlName="Username" type="text" placeholder="Enter phone.">
    <ion-icon class="ion-padding-left" name="person-outline"></ion-icon>
  </ion-input>
</ion-row>
<ion-row class="ion-padding">
  <ion-input formControlName="password" [type]="fieldTextType ? 'text' : 'password'" placeholder="Enter password..">
    <ion-icon  [name]="fieldTextType ? 'eye-outline' : 'eye-off-outline'" (click)="toggleFieldTextType()" class="ion-padding-left"></ion-icon>
  </ion-input>
</ion-row>

单击按钮ionic 2时更改图标

Change icon when click button ionic 2

ionic-framework

ionic2

angular