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

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

问题在于你的HTML。您必须正确关闭您的选项标记，例如</option>

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

试试这肯定会解决你的问题。

Answer 2

只需将其添加到您的选择

即可

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