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

我正在使用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 for new selectedDevice, but what I
    // got here is always last selection, not the one I just select.
}

#1楼

您可以通过选择标记创建一个参考变量传递值回组件#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);
}

#2楼

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

<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 ...
  }
}

柱塞 -不使用<form>
Plunker-使用<form>并使用新的Forms API

#3楼

我在https://angular.io/docs/ts/latest/guide/forms.html上进行Angular 2表单教程（TypeScript版本）时遇到了这个问题

select / option块不允许通过选择选项之一来更改选择的值。

尽管我想知道原始教程中是否缺少某些内容，或者是否有更新，但是按照Mark Rajcok的建议行之有效。无论如何，添加

onChange(newVal) {
    this.model.power = newVal;
}

到HeroFormComponent类中的hero-form.component.ts

和

(change)="onChange($event.target.value)"

到<select>元素中的hero-form.component.html使其工作

#4楼

只需使用[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>

#5楼

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

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

这是我可以通过两种方式绑定来设置页面加载时的选择值的唯一方法。这是因为填充选择框的列表与选择框所绑定的对象并不完全相同，并且它必须是相同的对象，而不仅仅是相同的属性值。

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3192402

标签

angularjs

plunker

typescript

Mark