(change) vs (ngModelChange) im Winkel

325

Winkel 1 akzeptiert kein onchange()Ereignis, sondern nur ng-change()Ereignis.

Angular 2 hingegen akzeptiert sowohl Ereignisse (change)als auch (ngModelChange)Ereignisse, die beide dasselbe zu tun scheinen.

Was ist der Unterschied?

Welches ist am besten für die Leistung?

ngModelChange :

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

vs change :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>
Ramesh Rajendran
quelle
2
Ich möchte diese nicht vergleichen. Ich möchte nur wissen, welches für die Leistung am besten geeignet ist.
Ramesh Rajendran
6
Ja, es gibt keinen Vergleich. Wenn Sie ngModel verwenden, können Sie das spätere verwenden, ansonsten das erste. Es ist immer vorzuziehen, ngModel zu vermeiden, da dies eine bidirektionale Datenbindung ist und daher die Leistung
beeinträchtigt
2
Bearbeitet, um den Schwerpunkt auf "Was ist der Unterschied" und "Was ist performanter" zu legen, um Subjektivität zu entfernen und für die Wiedereröffnung zu stimmen.
Ruffin
12
In Angular 7 wird (ngModelChange) = "eventHandler ()" ausgelöst, BEVOR der an [(ngModel)] = "value" gebundene Wert geändert wird, während (change) = "eventHandler ()" NACH dem an gebundenen Wert ausgelöst wird [(ngModel)] = "Wert" wird geändert.
CAK2
4
Das (Änderungs-) Ereignis wird übrigens nur ausgelöst, wenn der Fokus die Eingabe verlässt. Wenn Sie möchten, dass nach jedem Tastendruck ein Ereignis ausgelöst wird, können Sie das (Eingabe-) Ereignis verwenden.
John Gilmer

Antworten:

494

(change) Ereignis, das an das klassische Eingabeänderungsereignis gebunden ist.

https://developer.mozilla.org/en-US/docs/Web/Events/change

Sie können das Ereignis (Ändern) verwenden, auch wenn Sie kein Modell als Eingabe haben

<input (change)="somethingChanged()">

(ngModelChange)ist die @OutputDirektive von ngModel. Es wird ausgelöst, wenn sich das Modell ändert. Sie können dieses Ereignis nicht ohne die Anweisung ngModel verwenden.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

Wenn Sie mehr im Quellcode entdecken, wird (ngModelChange)der neue Wert ausgegeben.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

Es bedeutet also, dass Sie die Möglichkeit einer solchen Verwendung haben:

<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
    // do something with new value
}

Grundsätzlich scheint es keinen großen Unterschied zwischen zwei zu geben, aber ngModelEreignisse gewinnen an Kraft, wenn Sie sie verwenden [ngValue].

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>
dataChanged(newObj) {
    // here comes the object as parameter
}

Angenommen, Sie versuchen dasselbe ohne " ngModelDinge".

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>
changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}
omeralper
quelle
1
Was passiert, wenn ich das Änderungsereignis mit dem ngmodel-Objekt verwende?
Ramesh Rajendran
6
@RameshRajendran Ich habe die Antwort verbessert. Sie können das Änderungsereignis weiterhin mit dem ngModel-Objekt verwenden, das Änderungsereignis übergibt jedoch den Ereignisparameter. Das Ereignis ngModelChange übergibt den neuen Wert.
Omeralper
1
Ja +1. Ich habe jedoch ein Problem mit ngmodelchange. Wenn Sie alle Werte mit Strg + A aus dem Textfeld löschen, wird ngModelChange nicht ausgelöst.
Ramesh Rajendran
6
<input (ngModelChange)="modelChanged($event)">ist nicht richtig, [ngModel]ist erforderlich.
E-Cloud
3
Etwas, das Sie nicht tun können (change), in diesem Fall können Sie ein(onClick)="yourFunction(youParameter)"
jpmottin
83

In Winkel 7 wird der (ngModelChange)="eventHandler()"Wille ausgelöst, bevor der gebundene Wert [(ngModel)]="value"geändert wird, während der (change)="eventHandler()"Wille ausgelöst wird, nachdem der gebundene Wert [(ngModel)]="value"geändert wurde.

CAK2
quelle
1
Ich habe gerade in Angular 7.1 getestet und der Wert aus dem ngModel wird aktualisiert, bevor das Ereignis aufgerufen wird. Also das ist was ich benutze
Jahrenski
Es funktionierte auch in Winkel 6. +1 für meine Zeit sparen :)
Hemadri Dasari
1
Ist es nicht umgekehrt? Laut Angular Docs ngModelChange wird nach der Aktualisierung des Ansichtsmodells ausgelöst.
Wut
3
In der neuesten Dokumentation von Angular wird
pioro90
4
In Angular 7.2 wird das (ngModelChange)Ereignis tatsächlich ausgelöst, bevor der Wert geändert wird und (change) nachdem er sich geändert hat. Danke für die Info, super hilfreich!
Dennis Ameling
15

Wie ich in einem anderen Thema gefunden und geschrieben habe - dies gilt für Winkel <7 (nicht sicher, wie es in 7+ ist)

Nur für die Zukunft

Wir müssen beachten, dass dies [(ngModel)]="hero.name"nur eine Abkürzung ist, die entzuckert werden kann : [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Wenn wir also den Code entzuckern, würden wir am Ende Folgendes haben:

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

oder

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

Wenn Sie den obigen Code überprüfen, werden Sie feststellen, dass wir am Ende zwei ngModelChangeEreignisse haben, die in einer bestimmten Reihenfolge ausgeführt werden müssen.

Zusammenfassend: Wenn Sie ngModelChangezuvor platzieren ngModel, erhalten Sie den $eventWert als neuen Wert, aber Ihr Modellobjekt enthält weiterhin den vorherigen Wert. Wenn Sie es danach platzieren ngModel, hat das Modell bereits den neuen Wert.

QUELLE

Katastrophe
quelle
Vielen Dank für den Hinweis! Ich hatte dieses Problem, bis ich Ihre Erklärung fand
Omostan
2

1 - (change) ist an das HTML onchange-Ereignis gebunden. In der Dokumentation zu HTML onchange heißt es:

Führen Sie ein JavaScript aus, wenn ein Benutzer die ausgewählte Option eines <select>Elements ändert

Quelle: https://www.w3schools.com/jsref/event_onchange.asp

2 - Wie bereits erwähnt, (ngModelChange)ist an die Modellvariable gebunden, die an Ihre Eingabe gebunden ist.

Meine Interpretation lautet also:

  • (change)wird ausgelöst, wenn der Benutzer die Eingabe ändert
  • (ngModelChange) Wird ausgelöst, wenn sich das Modell ändert, unabhängig davon, ob es einer Benutzeraktion folgt oder nicht
Julien
quelle