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 add上的selectedCountry中的组件中加载了默认值：

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