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>