下拉列表中未选择Angular2值

时间:2017-05-22 07:02:13

标签: typescript angular2-template angular2-forms

我无法弄清楚我做错了实际上我想获得在我的表单中选择的下拉值。我使用模板驱动的形式:

 <select class="form-control" id="role"
                                        required
                                        [(ngModel)]="user.role" name="role"
                                        #role="ngModel">
                                <option *ngFor="let user_role of user_roles" [ngValue]="user_role">{{user_role.display_name}}</option>
                                </select>



 this.user = new User(user_details.name,user_details.email,user_details.roles[0],user_details.is_confirmed,'','',user_details.image);

这是user_details.roles [0]:

[
  {
    "id": 1,
    "name": "admin",
    "display": "Administrator",
    "pivot": {
      "user_id": 6,
      "role_id": 1
    }
  }
]

我无法弄清楚为什么没有选择该值的问题。根据我的调查,我确信这是由于[0]键内的“枢轴”对象,但我如何处理这个问题,我尝试没有“枢轴”,它工作正常。

2 个答案:

答案 0 :(得分:0)

好的,从我的POV,我会为这个案例使用一个事件。让我给你一个经典而简单的例子,我希望你可以从中选择。

假设这是您的HTML部分。

let picker = UIImagePickerController()
picker.sourceType = .photoLibrary
picker.view.backgroundColor = UIColor.white

然后,这是你的打字稿部分。

<select (change)="newValue($event)" class="" name="">
   <option value="val1">1</option>
   <option value="val2">2</option>
   <option value="val3">3</option>
   <option value="val4">4</option>
</select>

然后,您可以将此值指定给所需的

newValue(event: any){
    let value = event.target.value;
    console.log(value);
}

对象键属性。我希望我能帮助你。

答案 1 :(得分:0)

只需进行以下更改。

<select class="form-control" id="role" [(ngModel)]="user.role" name="role" >
    <option [selected]="user.role == **CHECK_YOUR_NAME_CONDITION_HERE**" value="user_role" > {{user_role.display_name}} </option>
</select>