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

양방향 데이터 바인딩이 필요하지 않은 경우 :

<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 태그에 참조 변수를 작성하고 값을 #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);
}

[value] 대신 [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>

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에

과

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

<select>요소의 hero-form.component.html에 작동하게했습니다.

각도 6 이상에서 selectionChange를 사용하십시오. 예 (selectionChange)= onChange($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);
}

이것은 페이지로드시 선택 값을 설정하기 위해 양방향 바인딩 작업을 수행 할 수있는 유일한 방법이었습니다. 선택 상자를 채우는 내 목록이 내 선택이 바인딩 된 것과 정확히 동일한 개체가 아니기 때문에 동일한 속성 값이 아니라 동일한 개체 여야하기 때문입니다.

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

각도 재질 드롭 다운에 이것을 사용했습니다. 잘 작동합니다

최신 이온 3.2.0이 (ion)을 (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);

}

앵귤러 7/8

각도 6에서, 반응성 형식 지시어와 함께 ngModel 입력 속성을 사용하는 것은 각도 7 +에서 더 이상 사용되지 않으며 제거되었습니다. 공식 문서를 읽으십시오.

반응 형 접근 방식을 사용하면 선택한 데이터를 다음과 같이 얻거나 설정할 수 있습니다.

      //in your template
 <select formControlName="person" (change)="onChange($event)"class="form-control">
    <option [value]="null" disabled>Choose person</option>
      <option *ngFor="let person of persons" [value]="person"> 
        {{person.name}}
    </option>
 </select> 


 //in your ts
 onChange($event) {
    let person = this.peopleForm.get("person").value
    console.log("selected person--->", person);
    // this.peopleForm.get("person").setValue(person.id);
  }

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

Angular 8에서는 다음과 같이 간단히 "selectionChange"를 사용할 수 있습니다.

 <mat-select  [(value)]="selectedData" (selectionChange)="onChange()" >
  <mat-option *ngFor="let i of data" [value]="i.ItemID">
  {{i.ItemName}}
  </mat-option>
 </mat-select>