(ubah) vs (ngModelChange) dalam sudut


326

Angular 1 tidak menerima onchange()acara, itu hanya menerima ng-change()acara.

Sudut 2, di sisi lain, menerima keduanya (change)dan (ngModelChange)peristiwa, yang keduanya tampaknya melakukan hal yang sama.

Apa bedanya?

mana yang terbaik untuk kinerja?

ngModelChange :

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

vs perubahan :

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

2
Saya tidak ingin membandingkannya. Saya hanya ingin tahu mana yang terbaik untuk kinerja?
Ramesh Rajendran

6
Ya tidak ada perbandingan. Jika Anda menggunakan ngModel, Anda dapat menggunakannya nanti jika tidak, yang pertama. Itu selalu lebih disukai untuk menghindari ngModel karena itu adalah pengikatan data dua arah, karenanya buruk untuk kinerja
Vamshi

2
Diedit untuk memberi tekanan pada "apa bedanya" dan "yang lebih performan" untuk menghapus subjektivitas & memilih untuk membuka kembali.
ruffin

12
Dalam Angular 7, (ngModelChange) = "eventHandler ()" akan memecat SEBELUM nilai yang terikat pada [(ngModel)] = "nilai" diubah sementara (perubahan) = "eventHandler ()" akan diaktifkan SETELAH nilai yang terikat dengan [(ngModel)] = "value" berubah.
CAK2

4
By the way, acara (perubahan) dipecat hanya ketika fokus meninggalkan input. Jika Anda ingin acara dipecat setelah setiap tombol ditekan, Anda dapat menggunakan acara (input).
John Gilmer

Jawaban:


496

(change) acara terikat ke acara perubahan input klasik.

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

Anda dapat menggunakan (mengubah) acara bahkan jika Anda tidak memiliki model di input Anda sebagai

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

(ngModelChange)adalah @Outputarahan dari ngModel. Ini menyala ketika model berubah. Anda tidak dapat menggunakan acara ini tanpa arahan ngModel.

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

Ketika Anda menemukan lebih banyak di kode sumber, (ngModelChange)pindahkan nilai baru.

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

Jadi itu berarti Anda memiliki kemampuan penggunaan seperti itu:

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

Pada dasarnya, sepertinya tidak ada perbedaan besar di antara keduanya, tetapi ngModelacara mendapatkan kekuatan saat Anda menggunakannya [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
}

menganggap Anda mencoba hal yang sama tanpa " ngModelbenda"

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

1
Apa yang akan terjadi jika saya menggunakan perubahan acara dengan objek ngmodel?
Ramesh Rajendran

6
@ RameshRajendran Saya sudah memperbaiki jawabannya. Anda masih dapat menggunakan perubahan acara dengan objek ngModel, tetapi mengubah acara melewati parameter acara, acara ngModelChange melewati nilai baru.
omeralper

1
Ya +1. Tapi saya punya masalah dengan ngmodelchange, ketika Anda menghapus semua nilai dari kotak teks dengan menggunakan ctr + A. maka ngModelChange tidak memicu.
Ramesh Rajendran

6
<input (ngModelChange)="modelChanged($event)">tidak benar, [ngModel]wajib.
e-cloud

3
Sesuatu, Anda tidak dapat melakukan (change), dalam hal ini, Anda dapat melakukan(onClick)="yourFunction(youParameter)"
jpmottin

83

Dalam Angular 7, (ngModelChange)="eventHandler()"kehendak menyala sebelum nilai terikat [(ngModel)]="value"berubah sementara (change)="eventHandler()"kehendak api setelah nilai terikat [(ngModel)]="value"diubah.


1
Saya justed diuji dalam Angular 7.1 dan nilai dari ngModel diperbarui sebelum acara tersebut disebut. Jadi itulah yang saya gunakan
Jahrenski

Ini bekerja di sudut 6 juga. +1 untuk menghemat waktu saya :)
Hemadri Dasari

1
Bukankah sebaliknya? Menurut Angular Documents ngModelChange kebakaran setelah model tampilan diperbarui.
Kemarahan

3
Dalam dokumentasi terbaru angular, kasus ini dijelaskan: angular.io/guide/…
pioro90

4
Dalam Angular 7.2, memang (ngModelChange)acara dipecat sebelum nilainya diubah dan (change) setelah itu berubah. Terima kasih atas informasinya, sangat membantu!
Dennis Ameling

15

Seperti yang saya temukan dan tulis dalam topik lain - ini berlaku untuk angular <7 (tidak yakin bagaimana dengan 7+)

Hanya untuk masa depan

kita perlu untuk mengamati bahwa [(ngModel)]="hero.name"hanya jalan pintas yang dapat de-bergula ke: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Jadi jika kita menghapus kode gula, kita akan berakhir dengan:

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

atau

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

Jika Anda memeriksa kode di atas, Anda akan melihat bahwa kami berakhir dengan 2 ngModelChangeperistiwa dan yang perlu dijalankan dalam beberapa urutan.

Kesimpulannya: Jika Anda menempatkan ngModelChangesebelumnya ngModel, Anda mendapatkan $eventsebagai nilai baru, tetapi objek model Anda masih memegang nilai sebelumnya. Jika Anda menempatkannya setelahnya ngModel, model tersebut sudah memiliki nilai baru.

SUMBER


Terima kasih telah menunjukkan ini! Saya punya masalah ini sampai saya menemukan penjelasan Anda
omostan

2

1 - (change) terikat ke acara pertukaran HTML. Dokumentasi tentang HTML onchange mengatakan sebagai berikut:

Jalankan JavaScript ketika pengguna mengubah opsi <select>elemen yang dipilih

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

2 - Seperti yang dinyatakan sebelumnya, (ngModelChange)terikat ke variabel model yang diikat ke input Anda.

Jadi, interpretasi saya adalah:

  • (change)terpicu saat pengguna mengubah input
  • (ngModelChange) terpicu saat model berubah, apakah itu berurutan dengan tindakan pengguna atau tidak
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.