Angular - 选择占位符不显示答案

【问题标题】：Angular - select placeholder not showingAngular - 选择占位符不显示
【发布时间】：2017-08-23 08:55:28
【问题描述】：

为什么这个简单的代码不起作用？我试图在我的选择中添加一个占位符，但它只是显示为列表中的其他选项之一。

<div *ngFor="let d of formDatiRichiesta" class="form-row">
          <select *ngIf="d.type=='select'" 
                  class="form-control" 
                  name="{{d.name}}" 
                  [(ngModel)]="model[d.name]"
                  required>
            <option selected disabled>{{d.placeholder}}</option>
            <option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.denominazione}}</option>
          </select>
        </div>

我正在使用angular4。谢谢。

--编辑-- 我发现如果我删除 [(ngModel)]="model[d.name]" 一切正常。有什么提示吗？

【问题讨论】：

当你不给选项赋值时，它会被赋值为与文本相同的值，如果你的选项的值不匹配，ngModel 也会清除选中的属性ngModel.
什么是“模型”？
见stackoverflow.com/questions/44044746/…

标签： html angular

【解决方案1】：

您必须将<option> 的值设置为模型的值，因为<select> 将使用模型的值作为默认选择。

当模型一开始没有定义时，你可以这样做：

<option value="undefined">Please choose...</option>

【讨论】：

【解决方案2】：

这就是它应该如何工作的。使用属性disabled，您不能选择它作为选项。

但是你可以添加hidden 属性来隐藏它：

<option value="" selected disabled hidden>{{d.placeholder}}</option>

【讨论】：

【解决方案3】：

 <select formControlName="value"  class="form-control"
                    style=" height: 40px">
                      <option [ngValue]="null" selected disabled hidden>Select</option>
                      <option>Save</option>
                      <option>Download</option>

                    </select>

【讨论】：

【解决方案4】：

简单地添加它就可以了。

<option value="" disabled>Select Category</option>

或者

<option [ngValue]="null">Select Category</option>

【讨论】：