在HTML / Bootstrap / angular2中的動態填充下拉列表中預選擇前代內容

Question

我面臨在動態填充的下拉列表中預選擇一個條目的問題。

這是關於選擇一種語言的文件。 可能的語言是動態填充的。 我希望有一個預選的值作為提示，該值未包含在此列表中。 例如“選擇語言”

這是我可能會起作用的代碼：

<select id="languageSelection" class="form-control" [(ngModel)]="selectedLanguage" (ngModelChange)="onLanguageChange($event)">
    <option selected disabled hidden>Choose language</option>
    <option class="" *ngFor="let l of languages" [ngValue]="l">{{l}}</option>
</select>

我得到了語言列表，但是預先選擇了一種語言。 如果刪除“隱藏”標簽，則“選擇語言”在列表中顯示為灰色。 但是語言也是預先選擇的。

先感謝您！

Answer 1

[(ngModel)]覆蓋所選屬性。 一種解決方法是為您的變量selectedLanguage設置預定義值，然后在選項中將其用作默認值，例如：

TS：

selectedLanguage = 0;

HTML：

<select id="languageSelection" class="form-control" [(ngModel)]="selectedLanguage" (ngModelChange)="onLanguageChange($event)">
    <option [disabled]="true" value="0">Choose Language</option>
    <option class="" *ngFor="let l of languages" [ngValue]="l">{{l}}</option>
</select>

那應該做的:)