Setzen Sie den Wert von ausgewählt in Dropdown in Angular 2

Question

Ich verwende FormBuilder, um Werte zu einem DB hinzuzufügen.

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

Bevor diese Werte addiert ich den Wert einer Dropdown (externe Firma) einstellen möchten zu schätzen, dass ich vorher

vorgelegt

<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> 

habe ich versucht, dieses

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

ich auch versucht mit ngModel, die auch nicht wie erwartet funktioniert.

Was wäre der beste Weg sein, den ausgewählten Zustand dieser Drop-Down-Einstellung ohne zum Beispiel jQuery greifen

Answer 1

Sie können die selected Attribut auf eine Option festgelegt, die den ausgewählten Wert im Modell hat.

[attr.selected]="selectedExternalCompany" 

verwenden, dass die HTML-Vorlage:

<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> 

Und in der Komponente setzt die selectedExternalCompany, wenn das Auswahlfeld ändern und verwenden, die als Modell zum Beispiel.

Dies basiert auf der Antwort How to add conditional attribute in Angular 2?