将选择元素绑定到Angular中的对象

本文翻译自：Binding select element to object in Angular

I'd like to bind a select element to a list of objects -- which is easy enough: 我想将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;
}

In this case, it appears that selectedValue would be a number -- the id of the selected item. 在这种情况下，似乎selectedValue将是一个数字-所选项目的ID。

However, I'd actually like to bind to the country object itself so that selectedValue is the object rather than just the id. 但是，我实际上想绑定到country对象本身，以便selectedValue是对象，而不仅仅是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. 似乎在我的selectedValue放置了一个对象-但不是我期望的对象。 You can see this in my Plunker example . 您可以在我的Plunker示例中看到这一点。

I also tried binding to the change event so that I could set the object myself based on the selected id; 我还尝试绑定到change事件，以便可以根据所选的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. 但是，似乎更改事件在绑定的ngModel更新之前就触发了-这意味着我当时无法访问新选择的值。

Is there a clean way to bind a select element to an object with Angular 2? 有没有一种干净的方法可以将选择元素绑定到具有Angular 2的对象？

#1楼

参考：https://stackoom.com/question/2Qow5/将选择元素绑定到Angular中的对象

#2楼

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

StackBlitz example StackBlitz示例

NOTE: you can use [ngValue]="c" instead of [ngValue]="c.id" where c is the complete country object. 注意：您可以使用[ngValue]="c"代替[ngValue]="c.id" ，其中c是完整的国家对象。

[value]="..." only supports string values [value]="..."仅支持字符串值
[ngValue]="..." supports any type [ngValue]="..."支持任何类型

update 更新

If the value is an object, the preselected instance needs to be identical with one of the values. 如果该value是一个对象，则预选实例必须与其中一个值相同。

See also the recently added custom comparison https://github.com/angular/angular/issues/13268 available since 4.0.0-beta.7 另请参阅自4.0.0-beta.7起可用的最近添加的自定义比较https://github.com/angular/angular/issues/13268

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

Take care of if you want to access this within compareFn . 请注意是否要在compareFn访问this 。

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

#3楼

This could help: 这可以帮助：

 <select [(ngModel)]="selectedValue"> <option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option> </select>

#4楼

您可以使用功能选择ID

<option *ngFor="#c of countries" (change)="onchange(c.id)">{{c.name}}</option>

#5楼

You can do this too without the need to use [(ngModel)] in your <select> tag 您也可以执行此操作，而无需在<select>标记中使用[(ngModel)]

Declare a variable in your ts file 在ts文件中声明一个变量

toStr = JSON.stringify;

and in you template do this 然后在您的模板中执行此操作

 <option *ngFor="let v of values;" [value]="toStr(v)">{{v}}</option>

and then use 然后使用

let value=JSON.parse(event.target.value)

to parse the string back into a valid JavaScript object 将字符串解析回有效的JavaScript对象

#6楼

You can get selected value also with help of click() by passing the selected value through the function 您也可以在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>

将选择元素绑定到Angular中的对象相关推荐

删除数组中某个指定元素或删除数组中某个对象元素
ES6--删除数组中某个指定元素或删除数组中某个对象 1.删除数组中某个指定元素 2.删除数组中的某个对象 1.删除数组中某个指定元素 let index = this.array.indexOf(n ...
中望CAD框选时变成,选择复制到剪切板中的对象
似乎与"有道词典"的一些设定有关系,关了有道以后就没事了,有一样的情况的可以试试! 转载于:https://blog.51cto.com/xueqiu/1371728
angular中的MVVM模式
在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...
html name选择器,2种用jQuery按name属性选择元素的方法
学习2种用jQuery按name属性选择元素的方法,拿走不谢! 给定一个HTML文档,如何使用jQuery按name属性选择元素? 在jQuery中,可以使用2个方法通过name属性选择元素:下面就来 ...
d3.js中选择元素和绑定数据
回顾一下如何选择元素在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部这两个函数返回的结果称为选择集. ...
D3.js系列——初步使用、选择元素与绑定数据
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...
angular绑定数据_Angular中的数据绑定说明
angular绑定数据数据绑定 (Data Binding) 动机 (Motivation) Data often defines the look of an application. Inter ...
如何在组件模板中选择元素？
本文翻译自:How can I select an element in a component template? Does anybody know how to get hold of an e ...
d3.js中的选择元素
在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部这两个函数返回的结果称为选择集. 怎么使用这2个函数呢 ...

将选择元素绑定到Angular中的对象

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

将选择元素绑定到Angular中的对象相关推荐

最新文章

热门文章