在Angular中绑定选择元素到对象

我想把一个select元素绑定到一个对象列表上——这很简单:

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

在本例中，selectedValue似乎是一个数字——所选项目的id。

然而，我实际上想绑定到国家对象本身，以便selectedValue是对象，而不仅仅是id。我试着像这样改变选项的值:

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

但这似乎并不奏效。它似乎在我的selectedValue中放置了一个对象——但不是我所期望的对象。你可以在我的Plunker例子中看到这一点。

我还尝试绑定到更改事件，以便我可以根据所选的id自己设置对象;然而，似乎在绑定的ngModel更新之前，change事件就触发了——这意味着我在那一点上没有访问新选择的值。

在Angular 2中，是否有一种简洁的方法将选择元素绑定到对象?

当前回答

您还可以通过click()通过函数传递所选值来获得所选值

<md-select placeholder="Select Categorie"  
    name="Select Categorie" >
  <md-option *ngFor="let list of categ" [value]="list.value" (click)="sub_cat(list.category_id)" >
    {{ list.category }}
  </md-option>
</md-select>

2017-05-25 11:40:33

其他回答

此外，如果从给定的解决方案没有其他工作，检查你是否导入了“FormsModule”在“AppModule”，这是我的一个关键。

2018-01-14 21:24:17

为所选项目创建另一个getter

<form [formGroup]="countryForm">
  <select formControlName="country">
    <option *ngFor="let c of countries" [value]="c.id">{{c.name}}</option>
  </select>

  <p>Selected Country: {{selectedCountry?.name}}</p>
</form>

在ts中:

get selectedCountry(){
  let countryId = this.countryForm.controls.country.value;
  let selected = this.countries.find(c=> c.id == countryId);
  return selected;
}

2019-01-14 17:26:17

对我来说，它是这样工作的，你可以console event。target。value。

<select (change) = "ChangeValue($event)" (ngModel)="opt">   
    <option *ngFor=" let opt of titleArr" [value]="opt"></option>
</select>

2017-12-24 06:30:38

这段代码非常简单:

<select class="form-control" id="marasemaat" [(ngModel)]="fullNamePresentor" 
        [formControl]="stateControl" (change)="onSelect($event.target.value)">
  <option *ngFor="let char of programInfo1;let i = index;" 
          onclick="currentSlide(9,false)" 
          value={{char.id}}>{{char.title + " "}}  ----> {{char.name + " "+ char.family }} ---- > {{(char.time.split('T', 2)[1]).split(':',2)}}</option>
</select>

2020-09-07 06:02:19

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

StackBlitz例子

注意:你可以用[ngValue]="c"代替[ngValue]="c。Id”，其中c是完整的国家对象。

[value]="…"只支持字符串值 [ngValue]="…"支持任何类型

更新

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

参见最近添加的自定义比较https://github.com/angular/angular/issues/13268 从4.0.0-beta.7开始可用

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

如果你想在compareFn中访问这个，请注意。

compareFn = this._compareFn.bind(this);

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

_compareFn(a, b) {
   // Handle compare logic (eg check if unique ids are the same)
   return a.id === b.id;
}

2016-03-11 16:31:14

在Angular中绑定选择元素到对象

推荐文章

最新文章

标签