Html 更改选择选项时获取当前值 - Angular2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35055088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get current value when change select option - Angular2
提问by Garry
I'm writing an angular2 component and am facing this problem.
我正在编写一个 angular2 组件并面临这个问题。
Description:I want to push an option value in select selector to its handler when the (change)event is triggered.
描述：我想在(change)触发事件时将选择选择器中的选项值推送到其处理程序。
Such as the below template:
比如下面的模板：
<select (change)="onItemChange(<!--something to push-->)">
<option *ngFor="#value of values" value="{{value.key}}">{{value.value}}</option>
</select>
Component Class:
组件类：
export Class Demo{
private values = [
{
key:"key1",
value:"value1"
},
{
key:"key2",
value:"value2"
}
]
constructor(){}
onItemChange(anyThing:any){
console.log(anyThing); //Here I want the changed value
}
}
How can I get the value(without using jquery) ?
如何获取值（不使用 jquery）？
回答by Mubashir
There is a way to get the value from different options. check this plunker
有一种方法可以从不同的选项中获取值。检查这个plunker
component.html
组件.html
<select class="form-control" #t (change)="callType(t.value)">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
component.ts
组件.ts
this.types = [ 'type1', 'type2', 'type3' ];
this.order = {
type: 'type1'
};
callType(value){
console.log(value);
this.order.type=value;
}
回答by javed
In angular 4, this worked for me
在角度 4 中，这对我有用
template.html
模板.html
<select (change)="filterChanged($event.target.value)">
<option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
</option>
</select>
component.ts
组件.ts
export class FilterComponent implements OnInit {
selectedFilter:string;
public filterTypes = [
{value:'percentage', display:'percentage'},
{value:'amount', display:'amount'},
];
constructor() {
this.selectedFilter='percentage';
}
filterChanged(selectedValue:string){
console.log('value is ',selectedValue);
}
ngOnInit() {
}
}
回答by micronyks
回答by Bright Dodo
For me, passing ($event.target.value) as suggested by @microniks did not work. What worked was ($event.value) instead. I am using Angular 4.2.x and Angular Material 2
对我来说，@microniks 建议的传递 ($event.target.value) 不起作用。有效的是 ($event.value) 代替。我正在使用 Angular 4.2.x 和 Angular Material 2
<select (change)="onItemChange($event.value)">
<option *ngFor="#value of values" [value]="value.key">
{{value.value}}
</option>
</select>
回答by Ashfaq Hussain
You can Use ngValue. ngValuepasses sting and object both.
您可以使用ngValue. ngValue通过刺痛和对象。
Pass as Object:
作为对象传递：
<select (change)="onItemChange($event.value)">
<option *ngFor="#obj of arr" [ngValue]="obj.value">
{{obj.value}}
</option>
</select>
Pass as String:
作为字符串传递：
<select (change)="onItemChange($event.value)">
<option *ngFor="#obj of arr" [ngValue]="obj">
{{obj.value}}
</option>
</select>
回答by Parikshit Sarkar
Template:
模板：
<select class="randomClass" id="randomId" (change) =
"filterSelected($event.target.value)">
<option *ngFor = 'let type of filterTypes' [value]='type.value'>{{type.display}}
</option>
</select>
Component:
成分：
public filterTypes = [{
value : 'New', display : 'Open'
},
{
value : 'Closed', display : 'Closed'
}]
filterSelected(selectedValue:string){
console.log('selected value= '+selectedValue)
}
