[英]angular dynamic model binding not working
I have tried to dynamically bind the control using the angular but some reason it is not binding correctly.我尝试使用 angular 动态绑定控件,但由于某种原因它没有正确绑定。 what I am missing here.
我在这里缺少什么。
<ng-container *ngFor='let ui of uiData'>
<ng-container *ngIf="ui.position === 'left'">
<div class="p-grid">
<div>
<label>{{ ui.label }}</label>
</div>
<div>
<input id="input" type="text" [(ngModel)]= "ui[model]">
</div>
</div>
</ng-container>
</ng-container>
<div>
<button pButton type="button" (click)="SubmitData();" label="Save"></button>
</div>
All I am trying to here is get the data user has entered on the fields when button clicks.我在这里尝试的只是在单击按钮时获取用户在字段中输入的数据。
export class DynamicLoadComponent implements OnInit {
uiData:any;
userData:UserDataModel = null;
constructor() {
this.uiData = [
{ label:"test1",position: "left", control: "textbox",model: "userData.child1.docNumber" },
{ label:"test1",position: "left", control: "textbox", model: "userData.child1.ws"},
{ label:"test1",position: "right", control: "textbox", model: "userData.child1.ns" },
{ label:"test1",position: "left", control: "textbox", model: "userData.child1.dueDate" },
{ label:"test1",position: "left", control: "textbox",model: "userData.child1.initDate" },
]
}
SubmitData(){
console.log(this.userData);
}
}
Model class looks like this Model class 看起来像这样
export class UserDataModel {
child1: {
docNumber: string;
ws: number;
ns: number;
dueDate: string;
initDate: string;
}
}
Your variable uiDate
is an array of objects, therefore my guess is that you should address the item as [(ngModel)] = "ui.model"
instead of [(ngModel)] = "ui[model]"
您的变量
uiDate
是一个对象数组,因此我的猜测是您应该将该项目寻址为[(ngModel)] = "ui.model"
而不是[(ngModel)] = "ui[model]"
EDIT编辑
just tried it out:刚试了一下:
x.component.html: x.component.html:
<ng-container *ngFor='let ui of uiData'>
<ng-container *ngIf="ui.position === 'left'">
<div class="p-grid">
<div>
<label>{{ ui.label }}</label>
</div>
<div>
<input id="input" type="text" [(ngModel)]= "ui.model">
</div>
</div>
</ng-container>
</ng-container>
<div>
<button pButton type="button" (click)="SubmitData();" label="Save"></button>
</div>
x.component.ts: x.component.ts:
uiData:any;
userData:any = null;
constructor() {
this.uiData = [
{ label:"test1",position: "left", control: "textbox",model: "userData.child1.docNumber" },
{ label:"test1",position: "left", control: "textbox", model: "userData.child1.wi"},
{ label:"test1",position: "right", control: "textbox", model: "userData.child1.nri" },
{ label:"test1",position: "left", control: "textbox", model: "userData.child1.dueDate" },
{ label:"test1",position: "left", control: "textbox",model: "userData.child1.initDate" },
]
}
SubmitData(){
console.log(this.userData);
}
results in:结果是:
You have to instanciate UserDataModel and set [(ngModel)] = "userData[ui.model]"您必须实例化 UserDataModel 并设置 [(ngModel)] = "userData[ui.model]"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.