我正在写一个angular2组件,我正面临这个问题。
说明:我想在触发(change)
事件时将选择器中的选项值推送到其处理程序。
如下面的模板:
<select (change)="onItemChange(<!--something to push-->)">
<option *ngFor="#value of values" value="{{value.key}}">{{value.value}}</option>
</select>
组件类:
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
}
}
如何获取值(不使用jquery)?
答案 0 :(得分:52)
有一种方法可以从不同的选项中获取值。检查此plunker
component.html
<select class="form-control" #t (change)="callType(t.value)">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
component.ts
this.types = [ 'type1', 'type2', 'type3' ];
this.order = {
type: 'type1'
};
callType(value){
console.log(value);
this.order.type=value;
}
答案 1 :(得分:23)
在角度4中,这对我有用
template.html
<select (change)="filterChanged($event.target.value)">
<option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
</option>
</select>
component.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() {
}
}
答案 2 :(得分:3)
结帐此工作Plunker
<select (change)="onItemChange($event.target.value)">
<option *ngFor="#value of values" [value]="value.key">{{value.value}}</option>
</select>
答案 3 :(得分: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>
答案 4 :(得分:1)
您可以使用ngValue
。 ngValue
传递刺痛并反对它们。
传递为对象:
<select (change)="onItemChange($event.value)">
<option *ngFor="#obj of arr" [ngValue]="obj.value">
{{obj.value}}
</option>
</select>
传递为字符串:
<select (change)="onItemChange($event.value)">
<option *ngFor="#obj of arr" [ngValue]="obj">
{{obj.value}}
</option>
</select>
答案 5 :(得分:0)
模板:
<select class="randomClass" id="randomId" (change) =
"filterSelected($event.target.value)">
<option *ngFor = 'let type of filterTypes' [value]='type.value'>{{type.display}}
</option>
</select>
组件:
public filterTypes = [{
value : 'New', display : 'Open'
},
{
value : 'Closed', display : 'Closed'
}]
filterSelected(selectedValue:string){
console.log('selected value= '+selectedValue)
}
答案 6 :(得分:0)
HTML
<h3>Choose Your Favorite Cricket Player</h3>
<select #cricket (change)="update($event)">
<option value="default">----</option>
<option *ngFor="let player of players" [value]="player">
{{player}}
</option>
</select>
<p>You selected {{selected}}</p>
Javascript
import { Component } from '@angular/core';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
players = [
"Sachin Tendulkar",
"Ricky Ponting",
"Virat Kohli",
"Kumar Sangakkara",
"Jacques Kallis",
"Hashim Amla ",
"Mahela Jayawardene ",
"Brian Lara",
"Rahul Dravid",
"AB de Villiers"
]
selected = "----"
update(e){
this.selected = e.target.value
}
}
app.componen.html
<app-dropdown></app-dropdown>