我使用的是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.
}

当前回答

在angular 6及以上使用selectionChange。例子 (selectionChange) = onChange (event.value美元)

其他回答

你可以通过在选择标签#device上创建一个引用变量来将值传递回组件,并将它传递给更改处理程序onChange($event, device.value)应该有新值

<select [(ng-model)]="selectedDevice" #device (change)="onChange($event, device.value)">
    <option *ng-for="#i of devices">{{i}}</option>
</select>

onChange($event, deviceValue) {
    console.log(deviceValue);
}

另一种选择是将对象的value存储为字符串:

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

组件:

onChange(val) {
    this.selectedDevice = JSON.parse(val);
}

这是唯一的方法,我可以得到双向绑定工作,以设置页面加载的选择值。这是因为填充选择框的列表与我的选择绑定的对象不完全相同,它需要是相同的对象,而不仅仅是相同的属性值。

最新的离子3.2.0修改为ionChange

例如: 超文本标记语言

<ion-select (ionChange)="function($event)"> <ion-option>1<ion-option>
</ion-select>

TS

function($event){
// this gives the selected element
 console.log($event);

}

如果你不需要双向数据绑定:

<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);
}
<mat-form-field>
<mat-select placeholder="Vacancies" [(ngModel)]="vacanciesSpinnerSelectedItem.code" (ngModelChange)="spinnerClick1($event)"
    [ngModelOptions]="{standalone: true}" required>
    <mat-option *ngFor="let spinnerValue of vacanciesSpinnerValues" [value]="spinnerValue?.code">{{spinnerValue.description}}</mat-option>
</mat-select>

我使用这个角材质下拉。工作正常