Zmień ikonę kiedy kliknij przycisk jonowy 2

Question

próbuję zmienić ikonę kiedy kliknij przycisk Pokaż ukryte jego zawartość muszę zmienić w górę iw dół strzałki ikony

<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

Możesz użyć tutaj dyrektywy *ngIf, aby wyświetlić ikonę warunkową.

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

Można użyć name własność zamiast tworzenia dwóch różnych jonów-ikonę

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

Answer 2

Można utworzyć warunkowego w atrybucie

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

Answer 3

name= To zajęło mi wieki, aby odnaleźć od istnieje bardzo niewiele przykładów przełączania ikon. Jednak użyłem Ionic 2 Icons Doc i podszedł z tym:

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> 

zobaczyć moje CodePen jako przykład.

Mam nadzieję, że to pomoże!