如何在 Angular 2 的“选择”中获得新的选择？

Question

我正在使用 Angular 2（TypeScript）。

我想对新选择做点什么，但我在 onChange() 中得到的始终是最后一个选择。我怎样才能获得新的选择？

 <select [(ngModel)]="selectedDevice" (change)="onChange($event)">
   <option *ngFor="#i of devices">{{i}}</option>
</select>

 onChange($event) {
    console.log(this.selectedDevice);
    // I want to do something here with the new selectedDevice, but what I
    // get here is always the last selection, not the one I just selected.
}

原文由 Hongbo Miao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您不需要双向数据绑定：

 <select (change)="onChange($event.target.value)">
    <option *ngFor="let i of devices">{{i}}</option>
</select>

onChange(deviceValue) {
    console.log(deviceValue);
}

对于双向数据绑定，将事件绑定和属性绑定分开：

 <select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let i of devices">{{i}}</option>
</select>

 export class AppComponent {
  devices = 'one two three'.split(' ');
  selectedDevice = 'two';
  onChange(newValue) {
    console.log(newValue);
    this.selectedDevice = newValue;
    // ... do other stuff here ...
}

---

如果 devices 是对象数组，则绑定到 ngValue 而不是 value ：

 <select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3">
  <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
</select>
{{selectedDeviceObj | json}}

 export class AppComponent {
  deviceObjects = [{name: 1}, {name: 2}, {name: 3}];
  selectedDeviceObj = this.deviceObjects[1];
  onChangeObj(newObj) {
    console.log(newObj);
    this.selectedDeviceObj = newObj;
    // ... do other stuff here ...
  }
}

---

Plunker - 不使用 <form>

Plunker - 使用 <form> 并使用新的表单 API

原文由 Mark Rajcok 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您不需要双向数据绑定：

 <select (change)="updateSorting($event)">
  <option disabled selected>Sorting</option>
  <option value="pointDes">pointDes</option>
  <option value="timeDes">timeDes</option>
  <option value="timeAsc">timeAsc</option>
  <option value="pointAsc">pointAsc</option>
</select>

 updateSorting(e: any) {
  // console.log((e.target as HTMLSelectElement)?.value); // also work
  console.log(e.target.value);
}

原文由 tinystone 发布，翻译遵循 CC BY-SA 4.0 许可协议