(zmiana) vs (ngModelChange) pod kątem

326

Angular 1 nie akceptuje onchange()zdarzeń, tylko akceptuje ng-change()zdarzenia.

Z drugiej strony, Angular 2 akceptuje oba zdarzenia (change)i (ngModelChange)zdarzenia, które wydają się robić to samo.

Co za różnica?

który jest najlepszy do wydajności?

ngModelChange :

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

vs zmiana :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>
Ramesh Rajendran
źródło
2
Nie chcę ich porównywać. Chcę tylko wiedzieć, który jest najlepszy do wydajności?
Ramesh Rajendran
6
Tak, nie ma porównania. Jeśli używasz ngModel, możesz użyć później, w przeciwnym razie pierwszego. Zawsze wolał unikać ngModel, ponieważ jest to dwukierunkowe wiązanie danych, a zatem zły dla wydajności
Vamshi
2
Zredagowano, aby położyć nacisk na „jaka jest różnica” i „co jest bardziej wydajne”, aby usunąć podmiotowość, i zagłosowano na ponowne otwarcie.
ruffin
12
W Angularze 7 (ngModelChange) = „eventHandler ()” uruchomi się ZANIM zmieni się wartość związana z [(ngModel)] = „wartość”, podczas gdy (change) = „eventHandler ()” uruchomi się PO wartości powiązanej z [(ngModel)] = „wartość” została zmieniona.
CAK2
4
Nawiasem mówiąc, zdarzenie (zmiana) jest uruchamiane tylko wtedy, gdy fokus opuszcza wejście. Jeśli chcesz, aby zdarzenie było uruchamiane po każdym naciśnięciu klawisza, możesz użyć zdarzenia (wejściowego).
John Gilmer,

Odpowiedzi:

496

(change) zdarzenie powiązane z klasycznym zdarzeniem zmiany wejścia.

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

Możesz użyć (zmienić) zdarzenie, nawet jeśli nie masz modelu jako danych wejściowych

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

(ngModelChange)jest @Outputdyrektywą ngModel. Uruchamia się, gdy zmienia się model. Nie możesz użyć tego zdarzenia bez dyrektywy ngModel.

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

Gdy odkryjesz więcej w kodzie źródłowym, (ngModelChange)emituje nową wartość.

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

Oznacza to, że masz możliwość takiego użycia:

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

Zasadniczo wydaje się, że nie ma dużej różnicy między dwoma, ale ngModelzdarzenia zyskują moc, gdy używasz [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
}

Załóżmy, że próbujesz tego samego bez „ ngModelrzeczy”

<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
źródło
1
Co się stanie, jeśli używam zdarzenia zmiany z obiektem ngmodel?
Ramesh Rajendran
6
@RameshRajendran Poprawiłem odpowiedź. Nadal możesz używać zdarzenia zmiany z obiektem ngModel, ale zmiana zdarzenia przekazuje parametr zdarzenia, zdarzenie ngModelChange przekazuje nową wartość.
omeralper
1
Tak +1. Ale mam problem z ngmodelchange, gdy wyczyścisz wszystkie wartości z pola tekstowego za pomocą ctr + A. wtedy ngModelChange nie zostanie uruchomiony.
Ramesh Rajendran
6
<input (ngModelChange)="modelChanged($event)">jest nie w porządku, [ngModel]jest wymagane.
e-chmura,
3
Coś, czego nie możesz zrobić (change), w tym przypadku możesz zrobić(onClick)="yourFunction(youParameter)"
jpmottin
83

W Angularze 7, (ngModelChange)="eventHandler()"będzie strzelać zanim zmieni się wartość związana z, [(ngModel)]="value"podczas gdy (change)="eventHandler()"będzie strzelać po[(ngModel)]="value" zmianie wartości związanej z .

CAK2
źródło
1
Właśnie przetestowałem w Angular 7.1, a wartość z ngModel jest aktualizowana przed wywołaniem zdarzenia. Więc tego używam
Jahrenski
Działa również w kanciastym 6. +1 za oszczędność czasu :)
Hemadri Dasari
1
Czy nie jest na odwrót? Według Angular Docs ngModelChange pożary po aktualizacji modelu widoku.
gniew
3
W najnowszej dokumentacji kątowej ten przypadek jest opisany: angular.io/guide/…
pioro90
4
W programie Angular 7.2 (ngModelChange)zdarzenie jest uruchamiane przed zmianą wartości i (change) po jej zmianie. Dzięki za informację, super pomocna!
Dennis Ameling,
15

Jak znalazłem i napisałem w innym temacie - dotyczy to kątownika <7 (nie jestem pewien, jak to jest w 7+)

Tylko na przyszłość

musimy stwierdzić, że [(ngModel)]="hero.name"to tylko skrót, który może być odcukrzanych do: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Więc jeśli usuniemy kod cukru, otrzymamy:

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

lub

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

Jeśli sprawdzisz powyższy kod, zauważysz, że mamy 2 ngModelChangezdarzenia, które należy wykonać w określonej kolejności.

Podsumowując: jeśli umieścisz ngModelChangewcześniej ngModel, otrzymasz $eventnową wartość, ale obiekt modelu nadal ma poprzednią wartość. Jeśli umieścisz go później ngModel, model będzie już miał nową wartość.

ŹRÓDŁO

Nieszczęście
źródło
Dziękujemy za zwrócenie na to uwagi! Miałem ten problem, dopóki nie znalazłem twojego wyjaśnienia
omostan
2

1 - (change) jest powiązany ze zdarzeniem HTML onchange. Dokumentacja dotycząca wymiany HTML zawiera następujące informacje:

Uruchom JavaScript, gdy użytkownik zmieni wybraną opcję <select>elementu

Źródło: https://www.w3schools.com/jsref/event_onchange.asp

2 - Jak wspomniano wcześniej, (ngModelChange)jest powiązany ze zmienną modelu powiązaną z danymi wejściowymi.

Tak więc moja interpretacja jest następująca:

  • (change) uruchamia się, gdy użytkownik zmieni dane wejściowe
  • (ngModelChange) wyzwala się, gdy model się zmienia, niezależnie od tego, czy jest to konsekwencja działania użytkownika, czy nie
Julien
źródło