md-select 不与 object.value 绑定

Question

我正在尝试将 Angular 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 类型的属性

问题是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 可以玩。