我在 SO 和其他地方研究了许多类似的现有答案,但就是找不到解决方案。
我使用 Angular 2 中的模型驱动方法来构建我的表单,该表单既是添加表单又是编辑表单。在编辑模式下,这些值将填充从服务检索的数据:这方面一切都很好,因为简单的文本输入都正确绑定。
其中一个属性是“Country”,这是一个对象,如下所示:
export class Country {id: number; name: string;}
我想将其绑定到一个选择控件,该控件将包含可用国家/地区列表,以及加载表单时填充的模型中的国家/地区列表。我希望绑定的值是国家对象,而不仅仅是 ID。
这是选择控件的 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>
这是我尝试填充组件类中的值的地方:
(<FormControl>this.personForm.controls['country'])
.setValue(this.person.country, { onlySelf: true });
但是,即使控制台确认 this.person.country 存在并填充了正确的对象,页面加载时也没有选定的选项。
我可以让它与 ids 一起工作:在视图中更改为 [value]="c.id" 并在类中附加 .id,然后它就可以选择正确的选项。问题是 select 不再发出国家属性的对象,而只是发出 id。我尝试将 [value] 更改为 [ngValue] 并得到相同的结果。我什至将 [ngModel]="country" 添加到选择元素中,但这也没有帮助。
我将不胜感激任何帮助。
问题很可能是this.person.country
不一样country
就像你的countries
array.
如果我们想让它们相同,我们可以显式订阅valueChanges
选择控件或绑定的[(ngModel)]
to person.country
:
订阅更改
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
ng模型绑定
我们仍然必须使对象匹配(比较 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 http://plnkr.co/edit/UIS2V5rKh77n4JsjZtii?p=preview
订阅笨蛋: http://plnkr.co/edit/yyZ6ol1NPD77nyuzwS2t?p=info http://plnkr.co/edit/yyZ6ol1NPD77nyuzwS2t?p=info
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)