如何設置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}}