Liaison Angulaire 2 - 2 Voies avec NgModel à NgFor

Angulaire 2 comment puis-je obtenir 2 voies de liaison avec NgModel dans la répétition d'une liste à l'aide de NgFor. Ci-dessous mon plunkr et le code mais j'obtiens une erreur.

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() {
  }
}

source d'informationauteur Ka Tech | 2016-10-29

  1. 39

    Après creuser autour, j'ai besoin d'utiliser trackBy sur ngFor. Mise à jour plnkr et le code ci-dessous. Espérons que cela aide les autres.

    Travail Plnkr

    @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;
  }
}
  2. 11

    Ce que vous avez fait n'est pas de travail à cause de deux raisons.

    • Vous devez utiliser toDos[index] au lieu de l'élément avec ngModel (Lire pour plus d'info)
    • Chaque entrée doit avoir un nom unique

    Voici la solution pour votre problème.

    <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>