Як я можу отримати новий вибір у "select" у куті 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 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);
}

Просто використовуйте [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>

Я зіткнувся з цією проблемою, роблячи підручник Angular 2 form (версія TypeScript) за адресою https://angular.io/docs/ts/latest/guide/forms.html

Блок select / option не дозволив змінити значення вибору шляхом вибору однієї з опцій.

Робити те, що запропонував Марк Райкок, працював, хоча мені цікаво, чи є щось, що я пропустив в оригінальному підручнику, чи було оновлення. У будь-якому випадку додавання

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

до hero-form.component.ts в класі HeroFormComponent

і

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

to hero-form.component.html в <select>елементі змусило його працювати

використовуйте selectChange в кутовій 6 і вище. приклад (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 змінили (змінити) на (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.value замість $ event.target.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 ви можете просто використовувати "selectChange" так:

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