0

我正在尝试将 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>

编辑： 信息对象有两个属性：

id:number
name:string

loggedUser 有一个名为 infonumber类型的属性

问题是select没有绑定初始值

我做错了什么？

4

1 回答 1

0

使用双向绑定和模型驱动的表单不是预期的方式，因为可以考虑使用表单控制来替换 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 。

于 2017-05-13T07:56:56.440 回答