Angular2：デフォルトで「選択」オプションを選択して表示する必要があります

Question

angular2.Itの選択オプションの問題が選択されず、デフォルトで表示されます。IEブラウザでは機能しますが、他のブラウザでは機能しません。

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

あなたはこのような何かをしようとし、その後、デフォルトで事前に選択された（ユーザーが手動で選択することはできません）非選択項目を持つように欠けている場合は、次の

<option disabled hidden [value]="undefined">Please select a Country</option> 

[value]=undefinedは、有効な値を入力しないと事前に選択することができます。無効にして非表示にすると、ユーザーが手動で選択できないオプションになります。

Answer 2

デフォルト値の使用を設定する場合：デフォルト値を持っている場合

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

はinitのselectedCountryでコンポーネントにロードされた追加します。

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