Tengo que actualizar los valores que vienen de db. Estoy usando ngModel para establecer valores en el cuadro de texto mientras hago clic en el botón de actualización. pero para todos los demás registros, el cuadro de texto se abre.

Código ...
HTML

<li  *ngFor="let t of Tutorials ; let i = index">
      {{t.name}} --- {{t.url}}
      <input type="text" [(ngModel)]="tutName" *ngIf="update">
      <input type="text" [(ngModel)]="tutUrl" *ngIf="update">
      <button (click)="updateTut(t)">Update</button>
</li>

Read.ts

    update : boolean = false;
updateTut(tut : Tutorial){
      this.update = !this.update;
      if(this.update){
        this.tutName = tut.name;
        this.tutUrl = tut.url;
        this.update = !this.update;
}

Por favor, ayuda

Gracias

0
Archit Goel 16 oct. 2018 a las 14:58

2 respuestas

La mejor respuesta

Tener una llamada de propiedad update en los objetos de la matriz y actualizarla

<input type="text" [(ngModel)]="tutName" *ngIf="t.update">

updateTut(tut : Tutorial){
      tut .update = !tut .update;
      if(this.update){
        this.tutName = tut.name;
        this.tutUrl = tut.url;
        tut.update = !tut.update;
}
1
Sachila Ranawaka 16 oct. 2018 a las 12:03

El problema es con la variable update que está siendo compartida por todos los Tutorials.

Habría sugerido tener la propiedad de actualización en el tutorial, pero como dijiste, proviene de DB, por lo que no sugiero modificarla. Así que introduzca una variable llamada currentIndex más y realice un seguimiento del elemento seleccionado actualmente.

En html

<li  *ngFor="let t of Tutorials ; let i = index">
      {{t.name}} --- {{t.url}}
      <input type="text" [(ngModel)]="tutName" *ngIf="i == currentIndex ">
      <input type="text" [(ngModel)]="tutUrl" *ngIf="i == currentIndex">
      <button (click)="updateTut(t,i)">Update</button>
</li>

En ts

update : boolean = false;
currentIndex = -1;
updateTut(tut : Tutorial, index){
      this.currentIndex = index;
      this.tutName = tut.name;
      this.tutUrl = tut.url;
}
0
Sunil Singh 16 oct. 2018 a las 12:12