我使用的是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.
}
当前回答
另一种选择是将对象的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);
}
这是唯一的方法，我可以得到双向绑定工作，以设置页面加载的选择值。这是因为填充选择框的列表与我的选择绑定的对象不完全相同，它需要是相同的对象，而不仅仅是相同的属性值。
其他回答
我在https://angular.io/docs/ts/latest/guide/forms.html上学习Angular 2表单教程(TypeScript版本)时遇到了这个问题
选择/选项块不允许通过选择其中一个选项来改变选择的值。
按照Mark Rajcok的建议去做是有效的，尽管我想知道在最初的教程中我是否遗漏了什么内容，或者是否有更新。在任何情况下，补充
onChange(newVal) {
this.model.power = newVal;
}
到HeroFormComponent类中的hero-form.component.ts
and
(change)="onChange($event.target.value)"
到her-form.com ponent.html中的<select>元素使其工作
使用[ngValue]代替[value]!!
export class Organisation {
description: string;
id: string;
name: string;
}
export class ScheduleComponent implements OnInit {
selectedOrg: Organisation;
orgs: Organisation[] = [];
constructor(private organisationService: OrganisationService) {}
get selectedOrgMod() {
return this.selectedOrg;
}
set selectedOrgMod(value) {
this.selectedOrg = value;
}
}
<div class="form-group">
<label for="organisation">Organisation
<select id="organisation" class="form-control" [(ngModel)]="selectedOrgMod" required>
<option *ngFor="let org of orgs" [ngValue]="org">{{org.name}}</option>
</select>
</label>
</div>
最新的离子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);
}
另一种选择是将对象的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);
}
这是唯一的方法，我可以得到双向绑定工作，以设置页面加载的选择值。这是因为填充选择框的列表与我的选择绑定的对象不完全相同，它需要是相同的对象，而不仅仅是相同的属性值。
你可以通过在选择标签#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);
}
