如何在Angular 2的“select”中获得新的select？
我正在使用Angular 2（TypeScript）。
我想为新的select做些什么，但是我得到的onChange（）总是最后的select。 我怎样才能获得新的select？
<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 for new selectedDevice, but what I // got here is always last selection, not the one I just select. } 如果您不需要双向数据绑定：
<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
您可以通过在select标签onChange($event, device.value)上创build一个引用variables并将其传递给更改处理程序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); }
只需使用[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>
我在https://angular.io/docs/ts/latest/guide/forms.html做Angular 2表单教程（TypeScript版本）时遇到了这个问题
select/选项块不允许通过select其中一个选项来更改select的值。
做什么马克Rajcokbuild议工作，虽然我想知道是否有什么我错过了原来的教程，或者如果有更新。 无论如何，添加
onChange(newVal) { this.model.power = newVal; }
到HeroFormComponent类中的hero-form.component.ts
和
(change)="onChange($event.target.value)"
到<select>元素中的hero-form.component.html使其工作
另一种select是将对象作为string存储在值中：
<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); }
这是我可以通过双向绑定工作来设置页面加载时的select值的唯一方法。 这是因为我的列表填充select框不是完全相同的对象，因为我的select被绑定，它需要是相同的对象，不只是相同的属性值。
最新的离子3.2.0已修改（改变）为（ionChange）
例如：HTML
<ion-select (ionChange)="function($event)"> <ion-option>1<ion-option> </ion-select>
TS
function($event){ // this gives the selected element console.log($event); }
