Angular2: "Select" -Option sollte standardmäßig ausgewählt und sichtbar sein

Question

Probleme mit der Auswahloption in angular2.Es ist nicht standardmäßig ausgewählt und sichtbar. Es funktioniert im IE-Browser, aber nicht in anderen Browsern.

country.html:

<label class="control-label col-sm-offset-1 col-sm-2 bodySmall" for="country">Country:</label> 
       <div class="col-sm-3" [ngClass]="{ 'has-error': country.errors && (country.dirty || country.touched)}"> 
        <select class="form-control bodySmall" id="country" [(ngModel)]="model.country" name="country" #country="ngModel" required> 
         <!--required--> 

         <option value="" selected="selected">--Please select a Country--</option> 
         <option *ngFor="let c of countries" [value]="c">{{c}}</option> 
        </select> 
        <div *ngIf="country.errors && (country.dirty || country.touched)" class="help-block"> 
         <div [hidden]="!country.errors.required">Country is required.</div> 
        </div> 
       </div> 

Answer 1

Wenn Sie ein nicht auswählbaren Element haben wollen, sind (vom Benutzer nicht manuell auswählen kann) standardmäßig vorgewählt, dann so etwas wie dies versucht:

Die [value]=undefined kann die Vorauswahl treffen, wenn Sie keinen gültigen Wert angeben. Die deaktivierten und versteckten Optionen machen die Option vom Benutzer nicht manuell auswählbar.

Answer 2

Wenn Sie Standardwert Verwendung einzustellen:

<option disabled selected value>-- Please select a Country --</option> 

, wenn Sie Standardwert in der Komponente in selectedCountry auf init add geladen haben:

Tyler

<option *ngFor="let c of countries" [selected]="selectedCountry == 'c'" >{{c}}</option>