以Angular 2模型驱动的形式设置选择控件的选择选项 [英] Setting selected option of select control in an Angular 2 model-driven form

问题描述

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

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

我正在Angular 2中使用模型驱动的方法来构建我的表单，该表单既是添加表单，也是编辑表单.在编辑模式下，将使用从服务中检索到的数据来填充值:这方面很好，因为简单文本输入均已正确绑定.

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.

其中一个属性是国家/地区"，这是一个对象，如下所示:

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

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

我想将此绑定到一个select控件，该控件将具有可用的国家/地区列表，并在加载表单时从模型中填充一个国家/地区.我希望绑定的值是国家对象，而不仅仅是ID.

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.

这是select控件的html:

Here's the html of the select control:

    <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 });

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

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.

我可以使它与id一起使用:在视图中更改为[value] ="c.id"并在类中附加.id，然后通过选择正确的选项起作用.问题在于，select不再为country属性仅发出ID的对象.我尝试将[value]更改为[ngValue]，并得到相同的结果.我什至在选择元素中添加了[ngModel] ="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.

感谢您的帮助.

推荐答案

问题很可能是this.person.country与countries数组中的country不同.

The issue is most likely that this.person.country is not the same country as in your countries array.

如果要使它们相同，则可以显式订阅select控件的valueChanges或将[(ngModel)]绑定到person.country:

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

订阅更改

代码

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));

模板

ngModel绑定

我们仍然必须使对象匹配(比较Angular 2使用的策略，实际上是JS使用的策略)

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

代码

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

模板

<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柱塞:: http://plnkr.co/edit/UIS2V5rKh77n4JsjZtii?p =预览

订阅柱塞: http://plnkr.co/edit/yyZ6ol1NPD77nyuzwS2t?p = info

这篇关于以Angular 2模型驱动的形式设置选择控件的选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！