☰

Angular 2の「select」で新しい選択を取得するにはどうすればよいですか? 質問する

tag-icon • tag-icon angular typescript html-select
Angular 2の「select」で新しい選択を取得するにはどうすればよいですか? 質問する

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

ベストアンサー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を使用する

おすすめ記事