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

我的模板中有以下代码：

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

这工作正常，但一开始我有一个空盒子。我想在那里显示一条占位符消息如何使用ngModel实现这一点？

请尝试以下代码：

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

占位符
{{subSection.name}}

我的解决方案：

在component typescript文件中，我添加了一个属性selectUndefinedOptionValue，我不会初始化该属性，并在html中添加undefinedSelectOptionValue作为占位符选项的值。此解决方案适用于数字和字符串模型属性

@组件({
选择器：“某些组件选择器”，
templateUrl:“模板的url”，
})
导出类SomeComponent实现OnInit{
private selectUndefinedOptionValue:任意；
私有someObject:someObject；
恩戈尼尼特（）{
someObject=新的someObject（）；
}
}

--挑选--
option.text

添加空选项并设置为“未定义”也可以为空值添加

挑选
挑选
{{city.name}

我也有同样的问题，我在这个很棒的网站上找到了一个例子：

此外，我还举了下面的例子：

// 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'}
];

//模板
选择一个州
{{state.name}
//组成部分
state=null；
国家=[
{名称：'Arizona'，代码：'AZ'}，
{名称：'California'，代码：'CA'}，
{名称：'Colorado'，代码：'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)
});

//模板
选择类别
{{option.label}
//组成部分
选项=[{id:1，标签：'Category One'}，{id:2，标签：'Category Two'}]；
表单=新表单组({
类别：新FormControl（空，验证器。必需）
});

---

多亏了FranziskusKarsunke MeTTe伙计们提供了答案，有人能解释一下这个魔法是如何运作的吗？感谢这在我用来查看代码片段的Chrome版本60.0.3112.90上不起作用。在Chrome 60.0.3112.113上起作用，但在Chrome版本61.0.3163.100或62.0.3202.75或Opera上不起作用（值或ngValue，未定义或null）。-选择-似乎起作用（在上述Chrome版本上测试，加上Opera和Edge）。（即11甚至不显示我的测试表格！）注意：Safari和IE11将显示此解决方案的两个条目！我希望这在Angular 11中可以工作，但它不工作。…另一个选项可能是初始化模型变量，以便它们都已定义，因此条形码将为“”或null，但未定义。我建议在感谢

。我已经在IE11上验证了这一点。

// 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)
});