22

我的模板中有这段代码：

<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 做到这一点？

4

5 回答 5

33

我的解决方案：

在组件打字稿文件中，我添加了一个未初始化的属性 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-23T15:04:15.700 回答
14

我有同样的问题，我在这个很棒的网站上找到了一个例子：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-07T10:48:55.987 回答
9

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

<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-02T21:47:23.363 回答
6

试试这个代码：

<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-15T11:06:05.687 回答
0

这对我有用：

<option [已选择]="真" value="">Please select</option>

  1. 添加option标签`请选择作为内容。
  2. 添加一个[selected]="true"属性。
  3. value = ""作为属性添加。

除非value=""您单击选择字段，否则不会显示内容。

对于那些使用 Bootstrap 4+

您可以更改[selected]="true"为selected.

<option 选择 value="">Please select</option>

于 2021-12-07T09:51:34.250 回答