Angular 2 ngControl und leer wählen

Question

In meiner App habe ich wählen Tag mit ngFor Schleife erstellen, und es hat gut funktioniert, bis ich ngControl hinzufügen. Beim Laden der Seite ist jetzt keine Standardoption ausgewählt. Warum wird die erste Option nicht als Standard verwendet?

<select class="form-control icon-caret" name="country" ngControl="country_id"> 
    <option *ngFor="let item of countries" [value]="item.id"> 
      {{item.name}} 
    </option> 
</select> 

Answer 1

Ich denke, das liegt daran, dass eine Steuerung in Form Modell mit einem Standardwert von erstellt wird ""

Ich würde erwarten, dass Sie die Auswahl an das Modell binden sowieso (wie Sie den ausgewählten Wert erhalten ?). Wenn Sie den Anfangswert der gebundenen Eigenschaft (zum Beispiel im Konstruktor) gesetzt, dann wird das Element ausgewählt werden:

<select [(ngModel)]="selectedCountry" class="form-control icon-caret" name="country" ngControl="country_id"> 
    <option *ngFor="let item of countries" [value]="item.id"> 
      {{item.name}} 
    </option> 
</select> 

class MyComponent { 
    selectedCountry; 
    countries = [{id: 'USA'}, {id: 'GB'} ]; 
    constructor() { 
    this.selectedCountry = this.countries[0]; 
    } 
}