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

应该可以了 :)