[英]Angular 2 - 2 Way Binding with NgModel in NgFor
In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor.在 Angular 2 中,如何使用 NgFor 在重复列表中与 NgModel 进行 2 路绑定。 Below is my plunkr and code but I get an 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() {
}
}
After digging around I need to use trackBy on ngFor.在挖掘之后,我需要在 ngFor 上使用 trackBy。 Updated plnkr and code below.
更新了 plnkr 和下面的代码。 Hope this helps others.
希望这对其他人有帮助。
@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;
}
}
What you have done is not working because of two reasons.由于两个原因,您所做的工作不起作用。
Here's the working solution for your problem.这是您问题的有效解决方案。
<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>
Try this尝试这个
@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() {
}
}
You have to add a name attribute to the ngModel with name + index to make it unique.您必须使用 name + index 将 name 属性添加到 ngModel 以使其唯一。
<mat-form-field
#fileNameRef
appearance="fill"
color="primary"
floatLabel="auto"
>
<input
matInput
#fileNameCtrl="ngModel"
name="originalName{{ index }}"
[(ngModel)]="file.originalName"
type="text"
autocomplete="off"
autocapitalize="off"
readonly
/>
</mat-form-field>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.