Html 在 Angular 2 模型驱动形式中设置选择控件的选定选项

Setting selected option of select control in an Angular 2 model-driven form

提问by Matt

I have researched many similar existing answers on SO and elsewhere, but just can't find the solution to this.

我在 SO 和其他地方研究了许多类似的现有答案，但找不到解决方案。

I'm using the model-driven approach in Angular 2 to build my form, which is both an add and edit form. When in edit mode, the values are populated with data retrieved from a service: this aspect is all fine because the simple text inputs all bind correctly.

我在 Angular 2 中使用模型驱动的方法来构建我的表单，它既是添加表单又是编辑表单。在编辑模式下，这些值填充有从服务中检索到的数据：这方面一切正常，因为简单的文本输入都正确绑定。

One of the properties is 'Country' and this is an object as follows:

属性之一是“国家”，这是一个对象，如下所示：

    export class Country {id: number; name: string;}

I want to bind this to a select control which will have the list of countries available, and the one from the model populated when the form loads. I want the value of the binding to be the country object, not just the id.

我想将此绑定到一个选择控件，该控件将提供可用的国家/地区列表，以及在表单加载时填充的模型中的一个。我希望绑定的值是国家对象，而不仅仅是 id。

Here's the html of the select control:

这是选择控件的html：

    <select class="form-control" id="country" formControlName="country">
          <option value="default">--Select a country--</option>
          <option *ngFor="let c of countries" [value]="c">{{c.name}}      </option>
</select> 

And here is where i try to to populate the value from the component class:

这是我尝试从组件类填充值的地方：

    (<FormControl>this.personForm.controls['country'])
 .setValue(this.person.country, { onlySelf: true });

But there is no selected option when the page loads, even though the console confirms that this.person.country exists and is populated with the correct object.

但是页面加载时没有选择的选项，即使控制台确认 this.person.country 存在并且填充了正确的对象。

I can get it working with ids: changing to [value]="c.id" in the view and appending .id in the class, and then it works in that the right option is selected. The problem is that the select no longer emits an object for the country property, just the id. I tried changing [value] to [ngValue] and get the same result. I even added [ngModel]="country" to the select element and that didn't help either.

我可以让它与 ids 一起工作：在视图中更改为 [value]="c.id" 并在类中附加 .id，然后它在选择正确的选项时起作用。问题是 select 不再为 country 属性发出对象，而只是发出 id。我尝试将 [value] 更改为 [ngValue] 并得到相同的结果。我什至在 select 元素中添加了 [ngModel]="country" 但这也没有帮助。

I'd be grateful for any help.

我会很感激任何帮助。

采纳答案by silentsod

The issue is most likely that this.person.countryis not the same countryas in your countriesarray.

该问题很可能this.person.country与country您的countries阵列中的问题不同。

If we want to make them the same we can either explicitly subscribe to the valueChangesof the select control or bind [(ngModel)]to person.country:

如果我们想让它们相同，我们可以显式订阅valueChanges选择控件的 或绑定[(ngModel)]到person.country：

subscribe to changes

订阅更改

code

代码

this.countryForm.controls['country'].valueChanges.subscribe(country => 
  this.person.country = country;
);

// initialize by finding the correct country object (this will overwrite the person's country object)
this.countryForm.controls['country'].setValue(countries.filter(c => c.id === person.country.id));

template

模板

ngModel bind

ngModel 绑定

We still have to make the objects match (compare strategy that Angular 2 uses which is really what JS uses)

我们仍然需要使对象匹配（比较 Angular 2 使用的策略，这实际上是 JS 使用的）

code

代码

this.person.country = this.countries.filter(c => c.id === this.person.country.id)[0];

template

模板

<select class="form-control" id="country" formControlName="country" [(ngModel)]="person.country">
    <option value="default">--Select a country--</option>
    <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

ngModel Plunker:http://plnkr.co/edit/UIS2V5rKh77n4JsjZtii?p=preview

ngModel Plunker：http ://plnkr.co/edit/UIS2V5rKh77n4JsjZtii?p=preview

subscription Plunker: http://plnkr.co/edit/yyZ6ol1NPD77nyuzwS2t?p=info

订阅Plunker：http: //plnkr.co/edit/yyZ6ol1NPD77nyuzwS2t?p=info