web-dev-qa-db-ja.com

ボタンをクリックしたときにアイコンを変更ionic 2

非表示のコンテンツを表示するボタンをクリックするとアイコンを変更しようとしています。上下の矢印アイコンを変更する必要があります。

<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;
  }
angularionic-frameworkionic2
13
sridharan

ここで*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>

2つの異なるイオンアイコンを作成する代わりに、nameプロパティを使用できます。

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

name=属性で条件を作成できます

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

アイコンを切り替えるための例はほとんどないので、これを見つけるのに永遠に時間がかかりました。しかし、私は 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 を参照してください。

お役に立てれば！

3
Sean Locklin

問題を解決する必要がありましたが、多くの項目が追加されているため、コードをよりプログラム的に解決する必要がありました。最初は、上の例のように変数visibleを使用してみました。ただし、複数のアイテムを追加したため、visible変数を使用すると、それらすべてのオンとオフが切り替わります。代わりに、各アイテムに一意の識別子keyが含まれていたため、次のことを行いました。

export class WhateverPage {
  private visible = []; 
...
...
...
  toggle(key) {
    var index = this.visible.indexOf(key);
    if (index > -1) {
      this.visible.splice(index, 1);
    } else {
      this.visible.Push(key);
    }
  }

そして

<ion-icon ios="ios-add-circle" md="md-add-circle" (click)="toggle(key)" *ngIf="!visible.includes(key)"></ion-icon> 
<ion-icon ios="ios-checkmark" md="md-checkmark" (click)="toggle(key)" *ngIf="visible.includes(key)"></ion-icon>
1
maudulus