如何设置Angular 2反应形式的下拉菜单（选择选项）的默认值

Question

我有一个对象下拉列表。 这是一个具有id ， firstName和lastName属性的人员对象。

<select formControlName="person">
    <option *ngFor='let person of persons" [ngValue]="person">{{person.firstName+' '+person.lastName}}</option>
</select>

假设我有一个对象人，我想检查我拥有的这个人对象是否在下拉列表中。 如果存在，我希望该对象对象成为下拉列表的选定选项/默认值。

Answer 1

您可以使用formControl并设置默认值。 根据在组件初始化时是否具有该值，可以在构建表单时设置该值，否则在收到该值时使用patchValue 。 因此，当您构建表单时（如果有数据）

ngOnInit() {
  this.myForm = this._fb.group({
    person: [this.persons[1]]
  }); 
}

演示

PS，通常我们在这里不使用ngValue ，它绑定了整个对象，但是如果您希望/需要这样做，当然也可以使用:)

Answer 2

不使用ngModel的方法。您还可以使用* ngFor中每个迭代的索引（i）选择下拉列表的默认值。 您可以在选项元素上使用'selected'属性，然后将索引（i）的值设置为与要设为默认选项的选项等效。 在这里，我默认选择了第二个选项。 索引是数组中每个选项的索引。 下面是将代码修改为相同的代码：

@Component（{选择器：“ my-app”，模板：`{{option.name}}