web-dev-qa-db-fra.com

Comment obtenir une nouvelle sélection dans "select" dans Angular 2?

J'utilise Angular 2 (TypeScript).

Je veux faire quelque chose pour la nouvelle sélection, mais ce que j'ai dans onChange () est toujours la dernière sélection. Comment puis-je obtenir une nouvelle sélection?

<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
311
Hongbo Miao

Si vous n'avez pas besoin de liaison de données bidirectionnelle:

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

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

Pour la liaison de données bidirectionnelle, séparez les liaisons d'événement et de propriété:

<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 devices est un tableau d'objets, liez-vous à ngValue au lieu 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 - n'utilise pas <form>
Plunker - utilise <form> et utilise la nouvelle API de formulaire

635
Mark Rajcok

Vous pouvez renvoyer la valeur au composant en créant une variable de référence sur la balise de sélection #device et en la passant dans le gestionnaire de modifications onChange($event, device.value) devrait avoir la nouvelle valeur.

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

tilisez simplement [ngValue] au lieu de [valeur] !!

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

J'ai rencontré ce problème en effectuant le tutoriel sur les formulaires Angular 2 (version TypeScript) à l'adresse https://angular.io/docs/ts/latest/guide/forms. html

Le bloc sélection/option ne permettait pas de modifier la valeur de la sélection en sélectionnant l'une des options.

Faire ce que Mark Rajcok a suggéré a fonctionné, bien que je me demande si quelque chose m'a échappé dans le tutoriel original ou s'il y a eu une mise à jour. Dans tous les cas, ajouter

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

to hero-form.component.ts dans la classe HeroFormComponent

et

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

to hero-form.component.html dans l'élément <select> l'a fait fonctionner

11
jarisky

Une autre option consiste à stocker l'objet en valeur sous forme de chaîne:

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

composant:

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

C’est la seule façon pour moi d’obtenir une liaison bidirectionnelle permettant de définir la valeur de sélection au chargement de la page. En effet, ma liste qui remplit la zone de sélection n'était pas exactement le même objet que celui auquel ma sélection était liée et il doit s'agir du même objet, pas seulement des mêmes valeurs de propriété.

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>

Je l'ai utilisé pour angular liste déroulante des matériaux. fonctionne bien

2
Apurv

utilisez selectionChange dans angular 6 et plus. exemple (selectionChange)= onChange($event.value)

2
valentine

les derniers ionic 3.2.0 ont modifié (changement) en (ionChange)

par exemple: 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

Dans angulaire 5 je l'ai fait de la manière suivante. récupère l'objet $ event.value au lieu 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);
}
0
Kumaresan Perumal