在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 ，並將其用作模型。

這基於答案如何在Angular 2中添加條件屬性？