Question

我试图将角度4上的Material Design Select与对象的数字属性绑定。像这样：

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

修改 Info对象有两个属性：

id:number
name:string

loggedUser有一个名为info number type

的属性

问题是select不与初始值

绑定

我做错了什么？

Answer 1

使用双向绑定和模型驱动的表单不是预期的方式，因为可以考虑使用表单控件来替换ngModel。但是它可以完成，但是使用ngModel几乎是不必要的，因为尽管如此，你需要在formcontrol中引用你的loggedUser。从底部的plunker可以看出，由表单创建的对象具有精确的值并构建为loggedUser，因此表单对象将等于表单中的对象。根据您构建表单的方式，表单的对象可以在提交时简单地分配给loggedUser。同样作为评论，框中的香蕉，即[(ngModel)]等于以下

[ngModel]="someVariable" (ngModelChange)="someMethod($event)"

所以现在你正在使用“盒子里的香蕉”和ngModelChange，所以我建议你使用它，或者使用单向绑定和ngModelChange。

但回到您的代码并制作引用，可以在构建表单时进行：

this.myForm = this.fb.group({
  // find the object in the infos array that matched the value of loggeduser
  info: [this.infos.find(x => x.id == this.loggedUser.info).id]
})

如果这对loggedUser的值的检索是异步的，则需要等待构建表单直到可以设置值，或者您最初构建一个空表单并在检索到值后对其进行修补。

希望这会有所帮助，而且这里有 Plunker 。

md-select不与object.value绑定

1 个答案: