Angular md选择不与object.value绑定
我正在尝试将angular 4上的材质设计选择与对象的数字属性绑定。像这样:Angular md选择不与object.value绑定,angular,data-binding,angular-material,md-select,Angular,Data Binding,Angular Material,Md Select,我正在尝试将angular 4上的材质设计选择与对象的数字属性绑定。像这样: <md-select placeholder="info" formControlName="info" [(ngModel)]="loggedUser.info" (ngModelChange)="infoSelected()"> <md-option *ngFor="let info of
<md-select placeholder="info"
formControlName="info"
[(ngModel)]="loggedUser.info"
(ngModelChange)="infoSelected()">
<md-option *ngFor="let info of infos"
value="{{info.id}}">
<span>{{info.name}}</span>
</md-option>
</md-select>
loggedUser有一个名为info ofnumber
type的属性
问题是select没有与初始值绑定
我做错了什么?使用双向绑定和模型驱动的表单不是预期的方式,因为可以考虑使用表单控制来替代ngModel。但是这是可以做到的,但是使用ngModel是非常不必要的,因为尽管如此,您需要在formcontrol中引用您的
loggedUser
。从底部的plunker可以看到,表单创建的对象具有确切的值,并且构建为loggedUser
,因此表单对象将等于表单中的对象。根据构建表单的方式,表单的对象可以在提交时简单地分配给loggedUser
。同样作为注释,盒子里的香蕉,即[(ngModel)]
等于以下内容
[ngModel]=“someVariable”(ngModelChange)=“someMethod($event)”
现在您正在使用“盒子里的香蕉”和ngModelChange
,因此我建议您要么使用它,要么使用单向绑定和ngModelChange
但是回到您的代码并进行引用,可以在构建表单时进行:
this.myForm=this.fb.group({
//在infos数组中查找与loggeduser值匹配的对象
info:[this.infos.find(x=>x.id==this.loggedUser.info.id]
})
如果这意味着对loggedUser
的值的检索是异步的,则您需要等待生成表单,直到可以设置值,或者您最初生成一个空表单,并在检索到值后修补这些值
希望这有帮助,这里有一个可以玩。如果你尝试
[value]=“info.id”
,你会得到同样的结果吗?是的,它仍然在占位符上。请发布loggedUser.info
和infos
的详细信息。我已经更新了原始消息的更多细节。谢谢,谢谢你的评论。如果使用ngModel和ngModelChange是因为第二个select的选项数组取决于第一个select的值。loggedUser的值是sync和inmediate,但用于选择的选项(infos)的值是异步的。我首先在constructor()
上构建表单,然后在ngOnInit()
方法中初始化loggeduser的值,然后初始化infos数组的值。所有其他输入值均已正确初始化。我认为问题在于如何将所选选项与对象属性进行比较我不确定你的真正意思,但上面展示了如何将对象与表单控件绑定?这不是你的意思吗?如果没有,请你把你的代码放在那里,这就说明了问题所在,否则我只能“猜测”你的代码是什么样子。只需将Material design library更新到beta 5,现在一切正常。。。o_0
id:number
name:string