我想将一个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。
但是,我实际上希望绑定到country对象本身,这样selectedValue
就是对象,而不仅仅是id。我尝试像这样更改选项的值:
<option *ngFor="#c of countries" value="c">{{c.name}}</option>
但这似乎并不管用。它似乎在我的selectedValue
中放置了一个对象--但不是我期望的对象。你可以使用see this in my Plunker example。
我还尝试绑定到change事件,以便可以根据选择的id自己设置对象;但是,change事件似乎是在绑定的ngModel更新之前触发的--这意味着我当时无法访问新选择的值。
有没有一种干净利落的方法可以把select元素绑定到角度为2的对象上?
发布于 2016-12-15 22:41:37
这可能会有所帮助:
<select [(ngModel)]="selectedValue">
<option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option>
</select>
发布于 2017-05-03 16:46:49
您也可以这样做,而不需要在<select>
标记中使用[(ngModel)]
在ts文件中声明一个变量
toStr = JSON.stringify;
在您的模板中执行以下操作
<option *ngFor="let v of values;" [value]="toStr(v)">
{{v}}
</option>
然后使用
let value=JSON.parse(event.target.value)
将字符串解析回有效的JavaScript对象
发布于 2018-04-06 04:56:03
以防有人想用反应式表单做同样的事情:
<form [formGroup]="form">
<select formControlName="country">
<option *ngFor="let country of countries" [ngValue]="country">{{country.name}}</option>
</select>
<p>Selected Country: {{country?.name}}</p>
</form>
检查工作示例here
https://stackoverflow.com/questions/35945001
复制相似问题