在Angular 2中的下拉列表中选择的设置值

Question

我使用FormBuilder为数据库添加值。

this.formUser = this._form.group({ 
    "firstName": new FormControl('', [Validators.required]), 
    "lastName": new FormControl('', [Validators.required]), 
    "externalCompany": new FormControl('', [Validators.required]) 
}) 

将这些值加我想设置一个下拉列表（外部公司）的价值，珍惜，我事先

<select class="form-control" id="companyExternal" formControlName="externalCompany" (ngModelChange)=onChangeExternalC($event)> 
    <option value="" >Select existing company...</option> 
    <option value="{{company}}" *ngFor="let company of externalCompanies">{{company}}</option> 
    <option value="Company name..." >ADD ANOTHER...</option> 
</select> 

提交之前，我想这

this._commServe.addExternalCompany(company).subscribe((data) => { 
    this.formUser.value.externalCompany = company.CompanyName; 
}, (error) => { 
    this.errorMessage = <any>error; 
}) 

我也尝试使用ngModel也没有按预期工作。

将最好的办法是设置此下拉列表中选择状态，而不诉诸的jQuery例如

Answer 1

您可以设置selected属性对具有在模型中选定值的选项是什么。

[attr.selected]="selectedExternalCompany" 

使用HTML模板：

<select class="form-control" id="companyExternal" formControlName="externalCompany" (ngModelChange)=onChangeExternalC($event)> 
    <option value="" >Select existing company...</option> 
    <option value="{{company}}" 
     *ngFor="let company of externalCompanies" 
     [attr.selected]="selectedExternalCompany" 
     >{{company}}</option> 
    <option value="Company name..." >ADD ANOTHER...</option> 
</select> 

而且在设置组件的selectedExternalCompany时选择框的变化，并用其作为模型实例。

这是基于回答How to add conditional attribute in Angular 2?