Изменить значок при нажатии кнопки нажмите ионную 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 в качестве примера.

Надеюсь, это поможет!