更改选择选项 - Angular2时获取当前值

时间:2016-01-28 07:18:18

标签: html angular

我正在写一个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)?

7 个答案:

答案 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)

您可以使用ngValuengValue传递刺痛并反对它们。

传递为对象:

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