versiones - install angular 2

Enlace angular de 2 a 2 vías con NgModel en NgFor

Question

En Angular 2, ¿cómo obtendría un enlace de 2 vías con NgModel dentro de una lista repetitiva usando NgFor. A continuación se muestra mi plunkr y mi código, pero recibo 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() {
}
}

Answer 1

Después de cavar, necesito usar trackBy en ngFor. Plnkr y código actualizados 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;
}
}

Answer 2

Lo que has hecho no funciona por dos razones.

• Debe usar toDos [index] en lugar del elemento con ngModel ( Lea para más información )
• Cada entrada debe 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>

Answer 3

Prueba esto

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