angular - 单击按钮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>

文件.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 属性而不是创建两个不同的 ion-icon

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