Angular 2问题：获取选择选项的值

Question

我有一个select元素

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

- Andrew Thomas

Answer 1

将[ngValue]更改为[value]

  <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);
}

- J J B

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Andrew Thomas

谢谢，已经解决了我的 Angular 5 问题。 - Ghanshyam Lakhani

Answer 2

实际上，除非您真的想在值更改时执行某些操作，否则您不需要订阅“change”事件。但是，如果您只想获取所选值，则只需使用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>

- Alexander Leonov

---

是的，我需要在它发生变化时执行一个操作。谢谢。 - Andrew Thomas

@AndrewThomas，我更新了我的答案。但是，尽管你想在选择某个值时执行某些操作，你仍然不需要手动更改这个值。框架的职责是提供给你数据绑定，所以让它来完成这项工作。 - Alexander Leonov