如何在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的選擇控件中顯示佔位符（空選項）？

回答

相關問題