Я пытаюсь изменить значок, когда нажимаю кнопку, чтобы показать скрытый контент, мне нужно изменить значок стрелки вверх и вниз

<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;
  }
15
sridharan 6 Сен 2016 в 17:58

5 ответов

Лучший ответ

Вы можете использовать здесь директиву *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>
30
Pankaj Parkar 18 Май 2017 в 19:19

Мне нужно было решить проблему, за исключением того, что мой код требовал более программного решения, так как у меня добавляется множество элементов. Изначально я попытался использовать переменную 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 19 Апр 2018 в 12:31

Возможно, это поможет. Я использую (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>

screenshot

0
7guyo 2 Апр 2020 в 07:45

На это у меня ушла целая вечность, так как примеров переключения значков очень мало. Однако я использовал 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 15 Май 2017 в 18:39

Вы можете создать условное выражение в атрибуте name=

<ion-icon [name]="visible ? 'arrow-dropdown' : 'arrow-dropup'"></ion-icon>
10
user1752532user1752532 30 Янв 2017 в 14:31