Thay đổi biểu tượng khi nút bấm ion 2

Question

tôi đang cố gắng để thay đổi biểu tượng khi nhấp vào nút hiển thị nội dung ẩn của nó tôi cần phải thay đổi và biểu tượng mũi tên xuống

<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

Bạn có thể sử dụng *ngIf chỉ thị tại đây để hiển thị biểu tượng có điều kiện.

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

Bạn có thể sử dụng name tài sản thay vì tạo hai khác nhau ion-icon

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

Answer 2

Bạn có thể tạo điều kiện trong name= thuộc tính

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

Answer 3

này đã cho tôi mãi mãi để tìm từ có rất ít ví dụ ở đó để chuyển đổi các biểu tượng. Tuy nhiên, tôi đã sử dụng Ionic 2 Icons Doc và đến với điều này:

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> 

Xem CodePen như một ví dụ của tôi.

Hy vọng điều này sẽ hữu ích!