angular - valor - quitar elementos de un select jquery

¿Cómo puedo obtener una nueva selección en "select" en Angular 2?

Question

Estoy usando Angular 2 (TypeScript).

Quiero hacer algo para la nueva selección, pero lo que obtuve en onChange () siempre es la última selección. ¿Cómo puedo obtener una nueva selección?

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

Answer 1

El último iónico 3.2.0 ha modificado (cambio) a (ionChange)

por ejemplo: HTML

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

TS

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

}

Answer 2

En Angular 5 lo hice de la siguiente manera. obtener el objeto $ event.value en lugar de $ 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);
}

Answer 3

Me encontré con este problema mientras hacía el tutorial de formularios Angular 2 (versión TypeScript) en https://angular.io/docs/ts/latest/guide/forms.html

El bloque de selección / opción no permitía cambiar el valor de la selección seleccionando una de las opciones.

Hacer lo que sugirió Mark Rajcok funcionó, aunque me pregunto si hay algo que me perdí en el tutorial original o si hubo una actualización. En cualquier caso, agregando

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

a hero-form.component.ts en la clase HeroFormComponent

y

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

to hero-form.component.html en el elemento <select> hizo funcionar

Answer 4

Otra opción es almacenar el objeto en valor como una cadena:

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

componente:

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

Esta era la única forma en que podía obtener un enlace bidireccional trabajando para establecer el valor de selección en la carga de la página. Esto se debió a que mi lista que llena el cuadro de selección no era exactamente el mismo objeto al que estaba vinculada mi selección y debe ser el mismo objeto, no solo los mismos valores de propiedad.

Answer 5

Puede volver a pasar el valor al componente creando una variable de referencia en la etiqueta select #device y pasándola al controlador de cambios onChange($event, device.value) debería tener el nuevo valor

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

Answer 6

Si no necesita enlace de datos bidireccional:

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

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

Para el enlace de datos bidireccional, separe los enlaces de eventos y propiedades:

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

Si los devices son una matriz de objetos, enlace a ngValue lugar de 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 : no utiliza <form>
Plunker : usa <form> y usa la nueva API de formularios

Answer 7

use selectionChange en angular 6 y superior. ejemplo (selectionChange)= onChange($event.value)

Answer 8

¡Solo use [ngValue] en lugar de [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>

Answer 9

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

Utilicé esto para desplegar material angular. funciona bien