首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >更改select选项时获取当前值- Angular2

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

Stack Overflow用户
提问于 2016-01-28 15:18:18
回答 7查看 172K关注 0票数 47

我正在编写一个angular2组件,并且面临着这个问题。

说明:当触发(change)事件时,我希望将选择选择器中的选项值推送到其处理程序。

例如下面的模板:

代码语言:javascript
复制
<select (change)="onItemChange(<!--something to push-->)">
    <option *ngFor="#value of values" value="{{value.key}}">{{value.value}}</option>
</select>

组件类:

代码语言:javascript
复制
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)?

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2016-01-28 15:28:10

有一种方法可以从不同的选项中获取值。检查此plunker

component.html

代码语言:javascript
复制
<select class="form-control" #t (change)="callType(t.value)">
  <option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>

component.ts

代码语言:javascript
复制
this.types = [ 'type1', 'type2', 'type3' ];

callType(value) {
  console.log(value);
  this.order.type = value;
}
票数 81
EN

Stack Overflow用户

发布于 2017-05-29 16:00:06

在angular 4中,这对我很有效。

template.html

代码语言:javascript
复制
<select (change)="filterChanged($event.target.value)">
  <option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
  </option>
</select>

component.ts

代码语言:javascript
复制
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() {
  }
}
票数 37
EN

Stack Overflow用户

发布于 2016-01-28 15:43:20

签出此有效的Plunker

代码语言:javascript
复制
<select (change)="onItemChange($event.target.value)">
    <option *ngFor="#value of values" [value]="value.key">{{value.value}}</option>
</select>
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35055088

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档