How to display and hide Toogle within ngfor correctly?

Question

How to display and hide Toogle within ngfor correctly?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

listNotas() {
    
    this.service.getList(this.idAluno).subscribe(
      data => {
        this.error = data.error;
        this.list = data.message;        
        console.log(this.list);        
      },
      err => console.log(err)
    );
  }

status:Boolean=false;
  myToggle(i){
    this.status[i] = true;
    console.log(this.status[i]);    
  }

<div *ngFor="let data of list; let i = index">
    <span>
      {{data.aula}}
      <ion-toggle (click)="myToggle(i)"></ion-toggle>
    </span>
    <span *ngIf="status == true">
      {{data.nome}}
    </span>
  </div>

javascript for angular

asked by anonymous 19.07.2018 / 00:49

2 answers

Get coordinate of the image by clicking on it Error opening a new Activity on mobile - Android Studio

score 1 · Answer 1

The best way to do this would be:

First map to list for each element to have a status of false

array = array.map(obj = > { obj.status=false; return obj; })

Then your toggle function might look like this:

myToggle(element){
  element.active = !element.active;    
}

finally no html

<div *ngFor="let data of list">
    <span>
      {{data.aula}}
      <ion-toggle (click)="myToggle(data)"></ion-toggle>
    </span>
    <span *ngIf="data.status == true">
      {{data.nome}}
    </span>
  </div>

score 0 · Answer 2

I was able to solve it and I'll leave the solution posted here:

status:Boolean=false;
  myToggle(data){
    if(data.status === 1){
      data.status = 0;
    }else{
      data.status = 1;
    }    
    console.log(data.status)    
  }

<div *ngFor="let data of list">
    <span>
      {{data.aula}} - {{data.status}}
      <button ion-button (click)="myToggle(data)">mostrar</button>
    </span>
    <span *ngIf="data.status == 0">
      {{data.aula}}
    </span>
  </div>

for some reason the <ion-toggle> button did not work ...