在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>

那应该做的:)