Entrar Ainda não tem acesso?
2
respostas

Problemas com Toggle icon ionic 2

Referente ao curso Ionic 2 parte 1: aplicações híbridas mobile ainda mais poderosas

por Renato Rodrigues
| 77.6k xp | 9 posts

Bom dia galera, estou fazendo um toggle icon com eye-off e eye-on (olho), como mostra o código.

<ion-content>
  <ion-list>
    <ion-item *ngFor="let channel of channels; let i = index"[attr.data-index]="i">
      <ion-icon name="weg-marker" item-start [style.background-color]="getBackgroundColor(channel.color)"></ion-icon>
      <h2>{{ channel.parameter.desc[translate.currentLang] }}</h2>
      <ion-icon name="eye" padding item-end (click)="toggle()"  *ngIf="visible"></ion-icon>
      <ion-icon name="eye" ios="ios-eye-off" md="md-eye-off" *ngIf="!visible" padding item-end (click)="hide(channel)"></ion-icon>
      <ion-icon name="more" padding item-end (click)="showMoreOptions($event, channel, i)"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

Controller

  toggle(){

    this.visible = !this.visible;
  }

Só que quando eu chamo essa controller ao clicar no ícone, todos os ícones da lista são mudados, qual a melhor maneira de eu fazer isso?

2 respostas
por Matheus Brandino
| 4803.7k xp | 10196 posts
Alura Scuba Team Mobile Software Engineer

Renato, tudo bem ?

Cara eu não manjo nada de ionic, dado que ninguém te deu um feedback, resolvi tentar ajudar.

Cara eu desenvolvo nativamente, lá para solucionar esse problema a gente usa a biblioteca de design do google, acredito que talvez deva ter alguma coisa nesse sentido voltado para js.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

O problema é que cada compartilha o mesmo estado que é this.visible. Talvez você tenha copiado, não tenho certeza, de algum local esse trecho de código. Então, pegando o que você já tem pronto, cada channel teu deve ter a propriedade visible. E no seu toogle, você altera a propriedade de cada channel individualmente. Se cada channel tem seu vísible, você pode fazer *ngIf="channel.visible".

Seu toogle seria asssim:

  <ion-icon name="eye" padding item-end (click)="toggle(channel)"  *ngIf="channel.visible"></ion-icon>
 toggle(channel){

        channel.visible = !channel.visible;
  }

Talvez seja interessante usar outra forma de apresentar os dados caso esteja tendo muita dificuldade na parte de modelagem dos seus dados.