将选择元素绑定到Angular中的对象 [英] Binding select element to object in Angular

问题描述

我是Angular的新手，想要快速掌握新的方式。

我想将select元素绑定到对象列表 - 很容易：

  @Component（{
 selector：'myApp'，
模板：`< h1> My Application< / h1> 
< select [（ngModel）] =selectedValue> 
< option * ngFor =＃c of countries =c.id> {{c.name}}< / option> 
< / select>`
}）
导出类AppComponent {
 countries = [
 {id：1，name：United States}，
 {id：2，name：Australia} 
 {id：3，name：Canada} 
 {id：4，name：Brazil} 
 {id：5，name：England} 
]; 
 selectedValue = null; 
 
 $ / code> 

在这种情况下，看起来selectedValue会是一个数字 - id 。然而，我实际上想绑定到国家对象本身，以便selectedValue是对象而不仅仅是id。我尝试改变选项的值，如下所示：

 < option * ngFor =＃c of countriesvalue = C> {{c.name}}< /选项> 
  

但这似乎不起作用。它似乎将一个对象放入我的selectedValue中 - 但不是我期待的对象。您可以在我的Plunker示例中查看。

我也尝试绑定到更改事件，以便我可以基于选定的ID自己设置对象;然而，看起来更改事件在更新绑定ngModel之前触发 - 这意味着我无法访问此时新选定的值。

有没有一个干净的方式来绑定一个选择元素到一个对象与Angular 2？

解决方案

 < h1>我的应用程序< / h1> 
< select [（ngModel）] =selectedValue> 
< option * ngFor =let c of countries[ngValue] =c> {{c.name}}< / option> 
< / select> 
  

StackBlitz示例

$ b 注意：您可以使用 [ngValue] =c 代替 [ngValue] =c.id其中c是完整的国家对象。

[value] =...仅支持字符串值 -
[ngValue] =.. 支持任何类型

更新

如果值是一个对象，则预选实例需要与其中一个值相同。

另请参阅最近添加的自定义比较 https://github.com/angular/angular/issues/13268
可用于4.0.0-beta.7
$ b

 < select [compareWith] =compareFn... 
  

照顾你是否想要到一个在 compareFn 中存取此。

  compareFn = this._compareFn.bind（this）; 
 
 //或
 // compareFn =（a，b）=> this._compareFn（a，b）; 
 $ b $ _comareFn（（a，b）{
 if（this.x ...）{
 ... 
} 
  

I'm new to Angular and trying to get up to speed with the new way of doing things.

I'd like to bind a select element to a list of objects -- which is easy enough:

@Component({
   selector: 'myApp',
   template: `<h1>My Application</h1>
              <select [(ngModel)]="selectedValue">
                 <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
              </select>`
})
export class AppComponent{
    countries = [
       {id: 1, name: "United States"},
       {id: 2, name: "Australia"}
       {id: 3, name: "Canada"}
       {id: 4, name: "Brazil"}
       {id: 5, name: "England"}
     ];
    selectedValue = null;
}

In this case, it appears that selectedValue would be a number -- the id of the selected item.

However, I'd actually like to bind to the country object itself so that selectedValue is the object rather than just the id. I tried changing the value of the option like so:

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

but this does not seem to work. It seems to place an object in my selectedValue -- but not the object that I'm expecting. You can see this in my Plunker example.

I also tried binding to the change event so that I could set the object myself based on the selected id; however, it appears that the change event fires before the bound ngModel is updated -- meaning I don't have access to the newly selected value at that point.

Is there a clean way to bind a select element to an object with Angular 2?

解决方案

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

StackBlitz example

NOTE: you can use [ngValue]="c" instead of [ngValue]="c.id" where c is the complete country object.

[value]="..." only supports string values
[ngValue]="..." supports any type

update

If the value is an object, the preselected instance needs to be identical with one of the values.

See also the recently added custom comparison https://github.com/angular/angular/issues/13268 available since 4.0.0-beta.7

<select [compareWith]="compareFn" ...

Take care of if you want to access this within compareFn.

compareFn = this._compareFn.bind(this);

// or 
// compareFn = (a, b) => this._compareFn(a, b);

_comareFn((a, b) {
   if(this.x ...) {
     ...
}

这篇关于将选择元素绑定到Angular中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！