为什么我总是在下拉列表中有一个空值

Question

我正在显示一个简单的字符串列表下拉列表。我总是有一个空的下拉选项可用，即使我不想拥有它。如图

//predefined values for brandingSpaceType 
private brandingSpaceTypeValues: string[] = ["Mobile Shop", "Supermarket", 
"Shop In Shop", "Shop On Wheel", "Kiosk", "Others"]
private selectedBrandingSpaceType: string = this.brandingSpaceTypeValues[2];

这里是html

<div class="field">
<select class="form-control" [(ngModel)]="selectUndefinedOptionValue" 
name="brandingSpaceType" [disabled]="brandingSpaceTypeStatus.readonly">
<option [selected]="selectedBrandingSpaceType == x" *ngFor="let x of 
brandingSpaceTypeValues" [value]="x">{{x}}<option>
</select>{{selectUndefinedOptionValue}}
</div>

Answer 1

只需将此添加到您的 select

<option disabled hidden style='display: none' value=''></option>

disabled 使选项不可点击。
style='display: none' 不在旧版浏览器中显示。

<div class="field">

<select class="form-control" [(ngModel)]="selectUndefinedOptionValue" 
name="brandingSpaceType" [disabled]="brandingSpaceTypeStatus.readonly">

<option disabled hidden style='display: none' value=''></option>

<option [selected]="selectedBrandingSpaceType == x" *ngFor="let x of 
brandingSpaceTypeValues" [value]="x">{{x}}<option>

</select>{{selectUndefinedOptionValue}}
</div>

Answer 2

问题出在您的 html 上。您必须像 </option>

一样正确关闭您的选项标签

<option [selected]="selectedBrandingSpaceType == x" *ngFor="let x of 
brandingSpaceTypeValues" [value]="x">{{x}}</option>

试试这个，它一定会解决你的问题。

为什么我总是在下拉列表中有一个空值

Why i always have an empty value in drop down

angular2-forms

angular2-services