我想把一个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中，是否有一种简洁的方法将选择元素绑定到对象?
<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;
}
这招对我很管用:
HTML模板:
我添加了(ngModelChange)="selectChange($event)"到我的select。
<div>
<label for="myListOptions">My List Options</label>
<select (ngModelChange)="selectChange($event)" [(ngModel)]=model.myListOptions.id >
<option *ngFor="let oneOption of listOptions" [ngValue]="oneOption.id">{{oneOption.name}}</option>
</select>
</div>
component.ts:
listOptions = [
{ id: 0, name: "Perfect" },
{ id: 1, name: "Low" },
{ id: 2, name: "Minor" },
{ id: 3, name: "High" },
];
您需要添加到组件。这个函数是:
selectChange( $event) {
//In my case $event come with a id value
this.model.myListOptions = this.listOptions[$event];
}
注意:
我尝试使用[select]="oneOption.id==model.myListOptions。而不工作。
=============另一种方式可以是:=========
HTML模板:
我添加了[compareWith]="compareByOptionId到我的选择。
<div>
<label for="myListOptions">My List Options</label>
<select [(ngModel)]=model.myListOptions [compareWith]="compareByOptionId">
<option *ngFor="let oneOption of listOptions" [ngValue]="oneOption">{{oneOption.name}}</option>
</select>
</div>
component.ts:
listOptions = [
{ id: 0, name: "Perfect" },
{ id: 1, name: "Low" },
{ id: 2, name: "Minor" },
{ id: 3, name: "High" },
];
您需要添加到组件。这个函数是:
/* Return true or false if it is the selected */
compareByOptionId(idFist, idSecond) {
return idFist && idSecond && idFist.id == idSecond.id;
}
在app.component.html:
<select type="number" [(ngModel)]="selectedLevel">
<option *ngFor="let level of levels" [ngValue]="level">{{level.name}}</option>
</select>
和app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
levelNum:number;
levels:Array<Object> = [
{num: 0, name: "AA"},
{num: 1, name: "BB"}
];
toNumber(){
this.levelNum = +this.levelNum;
console.log(this.levelNum);
}
selectedLevel = this.levels[0];
selectedLevelCustomCompare = {num: 1, name: "BB"}
compareFn(a, b) {
console.log(a, b, a && b && a.num == b.num);
return a && b && a.num == b.num;
}
}
