角2問題越來越選擇期權價值

Question

我有一個選擇

<select name='shape_id' ngModel (change)='changeShape($event.target.value)'> 
    <option *ngFor="let shape of shapes" [ngValue]="shape.id">{{shape.name}}</option> 
</select> 

這裏是數據。

shapes = [ 
    {id:'1', name:'Angle'}, 
    {id:'2', name:'Bar'}, 
    ]; 

我無法獲得該值。

changeShape(shape){ 
    console.log(shape); 
    } 

這個輸出「0：1」，但我想值1

這裏的選項是什麼樣子的檢查。

<option value="0: 1" ng-reflect-ng-value="1">Angle</option> 

如何獲取id值1？

Answer 1

變化[ngValue]至[值]

<select name="shape_id" (change)="changeShape($event.target)"> 
    <option *ngFor="let shape of shapes" [value]="shape.id"> 
     {{shape.name}} 
    </option> 
    </select> 

和形狀shape.value。

changeShape(shape){ 
    console.log(shape.value); 
} 

Answer 2

實際上，您不需要訂閱'更改'事件，除非您確實想在值更改時執行某些操作。但是，如果您只想獲得選定的值，那麼只需使用ngModel將其綁定到組件屬性就足夠了。

組件：

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'home', 
    styleUrls: ['./home.component.css'], 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent { 

    shapes = [ 
     {id:'1', name:'Angle'}, 
     {id:'2', name:'Bar'}, 
    ]; 

    shape: string; 

    onSelect() { 
     // log updated value 
     console.log(this.shape); 
    } 

} 

模板：

<select name='shape_id' [(ngModel)]="shape" (change)="onSelect()"> 
    <option *ngFor="let shape of shapes" [value]="shape.id">{{shape.name}}</option> 
</select>