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属性，而不是创建两个不同的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

您可以在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为例。

希望这有帮助！

Answer 4

我需要解决这个问题，除了我的代码需要以编程方式解决它，因为我添加了很多项目。最初，我尝试使用变量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>

Answer 5

这可能有所帮助。我正在使用（Ionic 5）;

a.ts

  //declare this globally
  fieldTextType: boolean;

  toggleFieldTextType(){
    this.fieldTextType = !this.fieldTextType;
  }

a.html

<ion-row class="ion-padding">
  <ion-input formControlName="Username" type="text" placeholder="Enter phone.">
    <ion-icon class="ion-padding-left" name="person-outline"></ion-icon>
  </ion-input>
</ion-row>
<ion-row class="ion-padding">
  <ion-input formControlName="password" [type]="fieldTextType ? 'text' : 'password'" placeholder="Enter password..">
    <ion-icon  [name]="fieldTextType ? 'eye-outline' : 'eye-off-outline'" (click)="toggleFieldTextType()" class="ion-padding-left"></ion-icon>
  </ion-input>
</ion-row>

单击按钮离子2时更改图标

5 个答案: