Angular 单击按钮2时更改图标

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

<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>

---

您可以在此处使用

*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=

属性中创建条件

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

---

我花了很长时间才发现，因为很少有切换图标的例子。然而，我使用了这个方法，得出了以下结论：

ts:

html:

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

以我的为例

---

希望这有帮助

我需要解决这个问题，除了我的代码要求以更为编程的方式解决它，因为我添加了许多项。最初，我尝试使用变量

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);
    }
  }  

及

---

这可能会有所帮助。我正在使用（离子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>

---

这是一种比上面标记为答案的更具离子性的方式。我相信第一个例子是最干净的解决方案。不错，但只适用于一个离子图标，我认为使用大量离子图标是不好的做法

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>  

  //declare this globally
  fieldTextType: boolean;

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

<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>