web-dev-qa-db-fra.com

Angular 2 ngModelChange ancienne valeur

Quelqu'un peut-il me dire quelle est la meilleure pratique pour comparer l'ancienne et la nouvelle valeur de ngModel?

Dans angular 1:

$scope.$watch('someProperty', funciton(oldVal, newVal){
    // code goes here
})

Je pose cette question parce que (ngModelChange) ne m'apporte jamais le oldVal, seulement le newVal.

Dans mon cas, j'utilise ngModel dans un <select> tag et comparer l'ancienne sélection avec la nouvelle:

<select [(ngModel)]="current" (ngModelChange)="onModelChange($event)">
     <option *ngFor="let item of myArray" [ngValue]="item">{{item.name}} </option>
</select>
angularangular-ngmodelangular2-forms
12
Ron Avraham

Cela pourrait fonctionner

(ngModelChange)="onModelChange(oldVal, $event); oldVal = $event;"

ou

(ngModelChange)="onModelChange($event)"

oldValue:string;
onModelChange(event) {
  if(this.oldValue != event) {
    ...
  }
  this.oldValue = event;
}
15
Günter Zöchbauer

Exemple avec champ de saisie ...

<div *ngFor="let value of values">{{value}}
    <input [(ngModel)]="value" (focus)="old=value" (ngModelchange)="doSomething(old, value)">
</div>

doSomething(oldVal, newVal) {
    // some code
}
5
AJT82

Juste pour l'avenir

nous devons observer que [(ngModel)] = "hero.name" est juste un raccourci qui peut être décompressé en: [ngModel] = "hero.name" (ngModelChange) = "hero.name = $ event ".

Donc, si nous décodons le code, nous nous retrouverions avec:

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

ou

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

Si vous inspectez le code ci-dessus, vous remarquerez que nous nous retrouvons avec 2 événements ngModelChange et ceux-ci doivent être exécutés dans un certain ordre.

En résumé: Si vous placez ngModelChange avant ngModel, vous obtenez l'événement $ comme nouvelle valeur, mais votre objet modèle contient toujours la valeur précédente. Si vous placez après ngModel, le modèle aura déjà la nouvelle valeur.

SOURCE

3
Disaster