(ubah) vs (ngModelChange) dalam sudut

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"/>

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

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

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

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