Encuadernación angular de 2-2 vías con ngModel en ngFor

Question

Encuadernación angular de 2-2 vías con ngModel en ngFor

En Angular 2 cómo obtendría 2 enlaces con ngModel dentro de una lista repetida usando ngFor. A continuación se muestra mi plunkr y el código, pero me sale un error.

Plunkr

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;">
      <input [(ngModel)]="item" placeholder="item">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
      <label>{{item}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  toDos: string[] =["Todo1","Todo2","Todo3"];
  constructor() {}
  ngOnInit() {
  }
}

22

angular

Author: Ka Tech, 2016-10-29

Source

2 answers

Lo que has hecho no está funcionando por dos razones.

Tienes que usar toDos [index] en lugar de item con ngModel (Leer para más información)
Cada entrada tiene que tener un nombre único

Aquí está la solución de trabajo para su problema.

<div>
<div *ngFor="let item of toDos;let index = index;">
  <input name=a{{index}} [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
  <label>{{item}}</label>
</div>

18

Author: Lasitha Yapa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-30 15:59:06

score 48 · Accepted Answer

Después de investigar necesito usar trackBy en ngFor. Actualizado plnkr y el código a continuación. Espero que esto ayude a otros.

Plnkr de trabajo

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
      <input [(ngModel)]="toDos[index]" placeholder="item">
    </div>
    Below Should be binded to above input box
    <div *ngFor="let item of toDos">
      <label>{{item}}</label>
    </div>
  </div>
  `,
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  toDos: string[] =["Todo1","Todo2","Todo3"];
  constructor() {}
  ngOnInit() {
  }
  trackByIndex(index: number, obj: any): any {
    return index;
  }
}