如何在选择下拉列表中应用占位符以及angular 6中的[ngmodel]

Question

每当我使用[(ngModel(]时，第一个值变为空。但当我删除[(ngModel(]时，它运行良好。

<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" placeholder="Select Campaign" (change)="hitApiFunction(campaignInfo)">
<option value="" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData"> 
{{campData.campaign_name}}
</option>
</select>

Answer 1

作者@Krishna Rathore

您可以使用[value]="所选的隐藏

我在Stacklitz 上创建了一个演示

<form role="form" class="form form-horizontal" (ngSubmit)="onSubmit()" #form="ngForm" ngNativeValidate>
<div class="form-group row">
<div class="col-xl-4 col-lg-6 col-md-12">
<fieldset class="form-group">
<label for="customSelect">Categories:</label>
<select class="custom-select d-block w-100" id="Category" [(ngModel)]="Category" name="Category" required placeholder="d.ff">
<option hidden [value]=""  selected>Select one category </option>
<option *ngFor="let item of myBusinessList" [value]="item.id">{{item.name}}</option>
</select>
</fieldset>
</div>
</div>
<button type="submit" class="btn btn-raised btn-danger">Save</button>
</form>

Answer 2

感谢所有试图给出答案的人。。。它现在运行良好，正确的答案是…

<select class="custom-select" id="campaignDropdown" [(ngModel)]="campaignInfo" (change)="hitApiFunction(campaignInfo)">
<option [value]="0" disabled selected>Select Campaign</option>
<option *ngFor="let campData of campaigns" [ngValue]="campData"> 
{{campData.campaign_name}}
</option>
</select>

并且在ts文件中
campaignInfo=0；

Answer 3

尝试在component.ts文件中为campaignInfo变量分配占位符文本。

例如

export class CampaignComponent{
campaignInfo : any = "";
}

占位符为空的这种行为背后的原因是您正在下拉列表中添加ngModel，并且它还没有分配任何文本。这将适用于您，因为您有选项标记值属性，即选项Select Campaign的=''，这就是为什么为campaignInfo变量分配空字符串的原因。