Wie kann ich in "Auswahl" in Winkel 2 eine neue Auswahl erhalten?

Ich verwende Angular 2 (TypeScript).

Ich möchte etwas mit der neuen Auswahl machen, aber was ich bekomme, onChange()ist immer die letzte Auswahl. Wie kann ich die neue Auswahl erhalten?

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

Wenn Sie keine bidirektionale Datenbindung benötigen:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let i of devices">{{i}}</option>
</select>

onChange(deviceValue) {
    console.log(deviceValue);
}

Trennen Sie für die bidirektionale Datenbindung die Ereignis- und Eigenschaftsbindungen:

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

Wenn deviceses sich um ein Array von Objekten handelt, binden Sie an ngValueanstelle von 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- verwendet nicht <form>
Plunker- verwendet <form>und verwendet die neue Formular-API

Sie können den Wert an die Komponente zurückgeben, indem Sie eine Referenzvariable für das select-Tag erstellen #deviceund diese an den Änderungshandler übergeben onChange($event, device.value), der den neuen Wert haben sollte

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

Verwenden Sie einfach [ngValue] anstelle von [Wert] !!

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>

Ich bin auf dieses Problem gestoßen, als ich das Angular 2-Formular-Tutorial (TypeScript-Version) unter https://angular.io/docs/ts/latest/guide/forms.html ausgeführt habe

Der Auswahl- / Optionsblock erlaubte nicht, den Wert der Auswahl durch Auswahl einer der Optionen zu ändern.

Das zu tun, was Mark Rajcok vorgeschlagen hat, hat funktioniert, obwohl ich mich frage, ob ich im ursprünglichen Tutorial etwas verpasst habe oder ob es ein Update gab. In jedem Fall hinzufügen

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

zu hero-form.component.ts in der HeroFormComponent-Klasse

und

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

zu hero-form.component.html im <select>Element hat es funktioniert

Verwenden Sie selectionChange in Winkel 6 und höher. Beispiel (selectionChange)= onChange($event.value)

Eine andere Möglichkeit besteht darin, das Objekt im Wert als Zeichenfolge zu speichern:

<select [ngModel]="selectedDevice | json" (ngModelChange)="onChange($event)">
    <option [value]="i | json" *ngFor="let i of devices">{{i}}</option>
</select>

Komponente:

onChange(val) {
    this.selectedDevice = JSON.parse(val);
}

Dies war die einzige Möglichkeit, die bidirektionale Bindung zum Festlegen des Auswahlwerts beim Laden der Seite zu aktivieren. Dies lag daran, dass meine Liste, die das Auswahlfeld ausfüllt, nicht genau dasselbe Objekt war, an das meine Auswahl gebunden war, und dass es dasselbe Objekt sein muss, nicht nur dieselben Eigenschaftswerte.

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

Ich habe dies für das eckige Material-Dropdown verwendet. funktioniert gut

Die neuesten ionischen Versionen 3.2.0 wurden geändert (ändern) zu (ionChange)

zB: HTML

<ion-select (ionChange)="function($event)"> <ion-option>1<ion-option>
</ion-select>

TS

function($event){
// this gives the selected element
 console.log($event);

}

Winkel 7/8

Ab Winkel 6 wurde die Verwendung der Eingabeeigenschaft ngModel mit der Richtlinie für reaktive Formen in Winkel 7+ veraltet und insgesamt entfernt. Lesen Sie hier das offizielle Dokument.

Mit dem reaktiven Formularansatz können Sie ausgewählte Daten abrufen / festlegen als;

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

In Angular 5 habe ich Folgendes getan. Holen Sie sich das Objekt $ event.value anstelle von $ 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);
}

In Angular 8 können Sie einfach "selectionChange" wie folgt verwenden:

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