Question

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

<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。感谢。

- EDIT-- 我发现如果我删除[(ngModel)]="model[d.name]"一切正常。任何提示？

Answer 1

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

如果模型在开头未定义，您可以这样做：

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

Answer 2

它是如何工作的。使用属性disabled，您无法选择它作为选项。

但您可以添加hidden属性以隐藏它：

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

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

Answer 4

只需添加它即可使用。

var newStatus = (status, subStatus) => {
  if(status === 'CREATED' && 
         (subStatus === 'subStatus1' || 'subStatus2' || 'subStatus3')){
    return 'CONFIRMED';
  } else if(status === 'CANCELLED' && 
         (subStatus === 'subStatus4' || 'subStatus5' || 'subStatus6')){
    return 'REMOVED';
  } else if(status === 'REVIEW' && 
        (subStatus === 'subStatus7' || 'subStatus8' || 'subStatus9')){
    return 'CHECKED';
  }
}

<div>newStatus('CREATED', 'subStatus2')</div>

或

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

Angular - 选择占位符不显示

4 个答案: