Angular 2 - 2-сторонняя привязка с NgModel в NgFor

В Angular 2 как бы получить 2-стороннюю привязку с NgModel в повторяющемся списке с помощью NgFor. Ниже мой plunkr и код, но я получаю сообщение об ошибке.

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

Ответы

Ответ 1

После копания мне нужно использовать trackBy для ngFor. Обновлен plnkr и код ниже. Надеюсь, это поможет другим.

Рабочий 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

То, что вы сделали, не работает по двум причинам.

  • Вы должны использовать toDos [index] вместо элемента с ngModel (Подробнее читайте)
  • Каждый вход должен иметь уникальное имя

Здесь работает решение для вашей проблемы.

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