如何在Angular 2的选择控件中显示占位符（空选项）？

我有这样的代码在我的模板：如何在Angular 2的选择控件中显示占位符（空选项）？

<select [ngModel]="selectedSubSectionId" (ngModelChange)="onSubSectionChange($event)"> 
    <option *ngFor="let subSection of event.subSections" [ngValue]="subSection.id">{{ subSection.name }}</option> 
</select>

在我的组件：

public selectedSubSectionId: any; 

public onSubSectionChange(subSectionId: any) { 
    // some code I execute after ngModel changes. 
}

这工作不错，但一开始我有一个空箱子。我想在那里显示占位符消息。 如何使用ngModel做到这一点？

来源

2016-08-02 Leantraxxx

我的解决办法：

在组件打字稿文件我添加属性selectUndefinedOptionValue我不初始化，并在HTML我添加了undefinedSelectOptionValue作为价值占位符选项。此解决方案适用于数字和字符串模型属性。

@Component({ 
 
    selector: 'some-component-selector', 
 
    templateUrl:'url to template', 
 
}) 
 
export class SomeComponent implements OnInit { 
 
    private selectUndefinedOptionValue:any; 
 
    private someObject:SomeObject; 
 
    
 
    ngOnInit() { 
 
     someObject = new SomeObject(); 
 
    } 
 
}

<select [(ngModel)]="someObject.somePropertyId"> 
 
    <option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option> 
 
    <option *ngFor="let option of options" [value]="option.id">option.text</option> 
 
</select>

来源

2016-12-23 15:04:15 MeTTe

它也适用于[value] =“undefined”。 –

@FranziskusKarsunke MeTTe球员，谁能解释这个魔术如何工作？谢谢 – mondayguy

这不适用于我用来查看代码段的Chrome版本60.0.3112.90。 – nclarx

-4

您是否尝试过将placeholder="Your placeholder string"放入选择标签或选项标签内？

我认为如果你不想在你的视图中硬编码字符串，可以用一个变量替换字符串。

来源

2016-08-02 16:10:09 Kriss

它不工作答案。 – Leantraxxx

这个http://stackoverflow.com/questions/34183686/add-placeholder-to-select-tag-in-angular2 :) – Kriss

试试这个代码：

<select [ngModel]="selectedSubSectionId? selectedSubSectionId : ''" (ngModelChange)="onSubSectionChange($event)"> 
    <option value="" disabled selected hidden>Placeholder</option> 
    <option *ngFor="let subSection of event.subSections" [value]="subSection.id">{{ subSection.name }}</option> 
</select>

来源

2016-11-15 11:06:05

添加空的选项，并设置为“未定义”，也可以增加对空值过

<select [(ngModel)]="barcode"> 
    <option value="undefined" disabled selected hidden>Select</option> 
    <option value="null" disabled selected hidden>Select</option> 
    <option *ngFor="let city of turkiye" [ngValue]="city.id">{{city.name}}</option> 
</select>

来源

2017-05-02 21:47:23

小心：Safari和IE11将使用此解决方案显示两个条目！ –

我有同样的问题，我发现一个例子，这个伟大的网站：Angular Quick Tip

另外，我把下面的例子：

// template 
<form #f="ngForm"> 
    <select name="state" [ngModel]="state"> 
    <option [ngValue]="null">Choose a state</option> 
    <option *ngFor="let state of states" [ngValue]="state"> 
     {{ state.name }} 
    </option> 
    </select> 
</form> 

//component 
state = null; 

states = [ 
    {name: 'Arizona', code: 'AZ'}, 
    {name: 'California', code: 'CA'}, 
    {name: 'Colorado', code: 'CO'} 
];

还与反应形式的作品，这就是我使用的是什么：

// template 
<div class="form-group"> 
    <select formControlName="category"> 
    <option [ngValue]="null">Select Category</option> 
    <option *ngFor="let option of options" 
      [ngValue]="option">{{option.label}}</option> 
    </select> 
</div> 

// component 
options = [{ id: 1, label: 'Category One' }, { id: 2, label: 'Category Two' }]; 

form = new FormGroup({ 
    category: new FormControl(null, Validators.required) 
});

由于Netanel Basal提供

来源

2017-09-07 10:48:55

如何在Angular 2的选择控件中显示占位符（空选项）？

回答

相关问题