web-dev-qa-db-ja.com

どのように私はの "選択"で新しい選択を取得できます 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.
}
angulartypescript
275
Hongbo Miao

双方向のデータバインディングが不要な場合

<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を使います

591
Mark Rajcok

選択タグ#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);
}
34
Brocco

[値]の代わりに[ngValue]を使用するだけです。 

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>
18
robert king

https://angular.io/docs/ts/latest/guide/forms.html でAngular 2フォームチュートリアル（TypeScriptバージョン）を実行しているときにこの問題に遭遇しました。

Select/optionブロックは、オプションの1つを選択することによって選択の値を変更することを許可していませんでした。

元のチュートリアルで見逃したことがあるのか​​、それともアップデートがあったのか、疑問に思いますが、Mark Rajcokが提案したことを実行してもうまくいきました。いずれにせよ、追加

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

heroFormComponentクラスのhero-form.component.tsに追加します。

そして

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

<select>要素のhero-form.component.htmlに追加

10
jarisky

もう1つのオプションは、オブジェクトを値として文字列として格納することです。

<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値を設定するために双方向バインディングが機能する唯一の方法です。これは、選択ボックスに入力するリストが、選択したものとまったく同じオブジェクトではなく、同じプロパティ値ではなく、同じオブジェクトである必要があるためです。

3
kravits88
<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>

これを角度のあるマテリアルドロップダウンに使用しました。正常に動作します

2
Apurv

最新のイオン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);

}
2
skid

角度6以上ではselectionChangeを使用してください。例(selectionChange)= onChange($event.value)

1
valentine

Angular 5 では、次のようにしました。 $ event.target.valueの代わりにオブジェクト$ event.valueを取得する

<mat-form-field color="warn">
   <mat-select (ngModelChange)="onChangeTown($event)" class="form-width" formControlName="branch" [(ngModel)]="branch" placeholder="Enter branch">
     <mat-option *ngFor="let branch of branchs" [value]="branch.value">
                  {{ branch.name }}
     </mat-option>
   </mat-select>
</mat-form-field>

onChangeTown(event): void {
  const selectedTown = event;
  console.log('selectedTown: ', selectedTown);
}
0
Kumaresan Perumal