* ngFor alle colums auf einen Klick angular2

Question

<tr *ngFor = 'let student of students> 
<td contenteditable="true" class ='phone' #button> 
{{student.phone}} 
<i (click)='showbox()' class = ' glyphicon glyphicon-edit'></i> 
<input *ngIf='showinput' type="text" 
    class="phone form-control required email " style="height:38px;"> 
</td> 
</tr> 


showbox(){ 
    this.showinput = true; 
} 

Hier feuern, wann immer ich auf <td> klicken Sie Input-Tag auf ein öffnen sollte aber klicken sie auch für andere Spalten geöffnet. Kann jemand Hilfe vorschlagen?

Answer 1

showinput Variable wird im Kontext der Komponente deklariert.

Wenn Sie also auf das Tag td klicken, wird der Wert der Variablen korrekt geändert, aber da der Kontext die Komponente ist, wirkt sich dies auf jeden td in der Komponente aus.

Wenn die Variable nur die eine td betreffen soll, dann verwenden Sie die studentische Variable für den Kontext.

<td contenteditable="true" class ='phone' (click)='showbox(student)' #button>{{student.phone}} 
     <input *ngIf='student.showinput' type="text" [(ngModel)] = 'student.phone' class="phone form-control required email " style="height:38px;"> 
    </td> 

Komponente:

showbox(student) { 
    student.showinput = true; 
}