blocks|key|121816|text|有一种方法可以从不同的选项中获取值。检查此plunker|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|121817|component.html|121818|<select+class="form-control"+#t+(change)="callType(t.value)">
++<option+*ngFor="#type+of+types"+[value]="type">{{type}}</option>
</select>|code-block|syntax|javascript|121819|component.ts|121820|this.types+=+[+'type1',+'type2',+'type3'+];

callType(value)+{
++console.log(value);
++this.order.type+=+value;
}|121821|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/tD3UeHLVK9nKYoDJa68d?p=preview^0|L|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>There is a way to get the value from different options. check this <a href="http://plnkr.co/edit/tD3UeHLVK9nKYoDJa68d?p=preview" rel="noreferrer">plunker</a></p>
<p>component.html</p>
<pre><code>&lt;select class=&quot;form-control&quot; #t (change)=&quot;callType(t.value)&quot;&gt;
  &lt;option *ngFor=&quot;#type of types&quot; [value]=&quot;type&quot;&gt;{{type}}&lt;/option&gt;
&lt;/select&gt;
</code></pre>
<p>component.ts</p>

<pre class="lang-typescript prettyprint-override"><code>this.types = [ 'type1', 'type2', 'type3' ];

callType(value) {
  console.log(value);
  this.order.type = value;
}
</code></pre>


blocks|key|2673185|text|签出此有效的Plunker|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2673186|<select+(change)="onItemChange($event.target.value)">
++++<option+*ngFor="#value+of+values"+[value]="value.key">{{value.value}}</option>
</select>|code-block|syntax|javascript|2673187|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/qybOOJJjDDBIGNTq8d2Q?p=preview^0|6|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Checkout this working <a href="http://plnkr.co/edit/qybOOJJjDDBIGNTq8d2Q?p=preview" rel="noreferrer">Plunker</a></p>

<pre><code>&lt;select (change)="onItemChange($event.target.value)"&gt;
    &lt;option *ngFor="#value of values" [value]="value.key"&gt;{{value.value}}&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|2884688|text|在angular+4中，这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2884689|template.html|2884690|<select+(change)="filterChanged($event.target.value)">
++<option+*ngFor="let+type+of+filterTypes"+[value]="type.value">{{type.display}}
++</option>
</select>|code-block|syntax|javascript|2884691|component.ts|2884692|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()+{
++}
}|2884693|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>In angular 4, this worked for me</p>
<p>template.html</p>
<pre><code>&lt;select (change)=&quot;filterChanged($event.target.value)&quot;&gt;
  &lt;option *ngFor=&quot;let type of filterTypes&quot; [value]=&quot;type.value&quot;&gt;{{type.display}}
  &lt;/option&gt;
&lt;/select&gt;
</code></pre>
<p>component.ts</p>

<pre class="lang-typescript prettyprint-override"><code>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() {
  }
}
</code></pre>


blocks|key|2884703|text|对我来说，@microniks建议的传递($event.target.value)不起作用。起作用的是($event.value)。我使用的是Angular+4.2.x和Angular材质2|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2884704|<select+(change)="onItemChange($event.value)">
++++<option+*ngFor="#value+of+values"+[value]="value.key">
+++++++{{value.value}}
++++</option>
</select>|code-block|syntax|javascript|2884705|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>&lt;select (change)="onItemChange($event.value)"&gt;
    &lt;option *ngFor="#value of values" [value]="value.key"&gt;
       {{value.value}}
    &lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|2884707|text|您可以使用ngValue。ngValue同时传递了sting和object。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2884708|作为对象传递：|2884709|<select+(change)="onItemChange($event.value)">
++++<option+*ngFor="#obj+of+arr"+[ngValue]="obj.value">
+++++++{{obj.value}}
++++</option>
</select>|code-block|syntax|javascript|2884710|作为字符串传递：|2884711|<select+(change)="onItemChange($event.value)">
++++<option+*ngFor="#obj+of+arr"+[ngValue]="obj">
+++++++{{obj.value}}
++++</option>
</select>|2884712|entityMap^0|5|7|D|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>You can Use <code>ngValue</code>. <code>ngValue</code> passes sting and object both.</p>

<p>Pass as Object:</p>

<pre><code>&lt;select (change)="onItemChange($event.value)"&gt;
    &lt;option *ngFor="#obj of arr" [ngValue]="obj.value"&gt;
       {{obj.value}}
    &lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Pass as String:</p>

<pre><code>&lt;select (change)="onItemChange($event.value)"&gt;
    &lt;option *ngFor="#obj of arr" [ngValue]="obj"&gt;
       {{obj.value}}
    &lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|2884719|text|模板：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2884720|<select+class="randomClass"+id="randomId"+(change)+=+
"filterSelected($event.target.value)">

<option+*ngFor+=+'let+type+of+filterTypes'+[value]='type.value'>{{type.display}}+
</option>

</select>|code-block|syntax|javascript|2884721|组件：|2884722|public+filterTypes+=+[{
++value+:+'New',+display+:+'Open'
},
{
++value+:+'Closed',+display+:+'Closed'
}]


filterSelected(selectedValue:string){
++console.log('selected+value=+'%2BselectedValue)

}|2884723|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Template: </p>

<pre><code>&lt;select class="randomClass" id="randomId" (change) = 
"filterSelected($event.target.value)"&gt;

&lt;option *ngFor = 'let type of filterTypes' [value]='type.value'&gt;{{type.display}} 
&lt;/option&gt;

&lt;/select&gt;
</code></pre>

<p>Component: </p>

<pre><code>public filterTypes = [{
  value : 'New', display : 'Open'
},
{
  value : 'Closed', display : 'Closed'
}]


filterSelected(selectedValue:string){
  console.log('selected value= '+selectedValue)

}
</code></pre>


blocks|key|2673265|text|HTML|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2673266|<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>|code-block|syntax|javascript|2673267|Javascript|2673268|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
++}
}|2673269|app.componen.html|2673270|<app-dropdown></app-dropdown>|2673271|entityMap^0|0|4|0|0|0|A|0|0|0|H|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

<p><strong>HTML</strong></p>
<pre><code>&lt;h3&gt;Choose Your Favorite Cricket Player&lt;/h3&gt;
&lt;select #cricket (change)=&quot;update($event)&quot;&gt;
    &lt;option value=&quot;default&quot;&gt;----&lt;/option&gt;
    &lt;option *ngFor=&quot;let player of players&quot; [value]=&quot;player&quot;&gt;
        {{player}}
    &lt;/option&gt;
&lt;/select&gt;
  
&lt;p&gt;You selected {{selected}}&lt;/p&gt;
</code></pre>
<p><strong>Javascript</strong></p>
<pre><code>import { Component } from '@angular/core';
  
@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
  players = [
    &quot;Sachin Tendulkar&quot;,
    &quot;Ricky Ponting&quot;,
    &quot;Virat Kohli&quot;,
    &quot;Kumar Sangakkara&quot;,
    &quot;Jacques Kallis&quot;,
    &quot;Hashim Amla    &quot;,
    &quot;Mahela Jayawardene    &quot;,
    &quot;Brian Lara&quot;,
    &quot;Rahul Dravid&quot;,
    &quot;AB de Villiers&quot;
  ]
  selected = &quot;----&quot;
  
  update(e){
    this.selected = e.target.value
  }
}
</code></pre>
<p><strong>app.componen.html</strong></p>
<pre><code>&lt;app-dropdown&gt;&lt;/app-dropdown&gt;
</code></pre>


<p>I'm writing an angular2 component and am facing this problem.</p>
<p><strong>Description:</strong> I want to push an option value in select selector to its handler when the <code>(change)</code> event is triggered.</p>
<p>Such as the below template:</p>
<pre><code>&lt;select (change)=&quot;onItemChange(&lt;!--something to push--&gt;)&quot;&gt;
    &lt;option *ngFor=&quot;#value of values&quot; value=&quot;{{value.key}}&quot;&gt;{{value.value}}&lt;/option&gt;
&lt;/select&gt;
</code></pre>
<p>Component Class:</p>

<pre class="lang-typescript prettyprint-override"><code>export Class Demo{

  private values = [
     {
        key:&quot;key1&quot;,
        value:&quot;value1&quot;
     },
     {
        key:&quot;key2&quot;,
        value:&quot;value2&quot;
     }
  ]

  constructor(){}
  onItemChange(anyThing:any){
     console.log(anyThing); //Here I want the changed value
  }
}
</code></pre>
<p>How can I get the value(without using jquery) ?</p>


Get current value when change select option - Angular2

我正在编写一个angular2组件，并且面临着这个问题。说明：当触发(change)事件时，我希望将选择选择器中的选项值推送到其处理程序。例如下面的模板：<select (change)="onItemChange()">    <option *ngFor="#valu...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改select选项时获取当前值- Angular2EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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