açısal olarak (değiştir) vs (ngModelChange)

326

Açısal 1 onchange()etkinliği kabul etmez , yalnızca kabul ederng-change() etkinliği .

2 Eğik, diğer taraftan, hem kabul (change)ve (ngModelChange)her ikisi de aynı şeyi yapıyor gibi görünüyor, olaylar.

Fark ne?

hangisi performans için en iyisidir?

ngModelDeğiştir :

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

vs değişiklik :

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

— Ramesh Rajendran
kaynak

2

Bunları karşılaştırmak istemiyorum. Sadece hangisinin performans için en iyi olduğunu bilmek istiyorum?

— Ramesh Rajendran

6

Evet, karşılaştırma yok. NgModel kullanıyorsanız daha sonra ilkini kullanabilirsiniz. İki yönlü veri bağlama olduğundan ngModel'den kaçınmak her zaman tercih edilir, bu nedenle performans için kötü

— Vamshi

2

Öznellikten kurtulmak için "fark nedir" ve "hangisi daha performanslıdır" üzerine vurgu yapmak için düzenlenmiş ve yeniden açmaya oy vermiştir.

— ruffin

12

Açısal 7'de, (ngModelChange) = "eventHandler ()", [(ngModel)] = "değer" değerine bağlı ÖNCE tetiklenirken (change) = "eventHandler ()", değere bağlı değerden SONRA tetiklenir [(ngModel)] = "değer" değiştirildi.

— CAK2

4

Bu arada, (change) olayı yalnızca odak girişten çıktığında tetiklenir. Her tuşa basıldıktan sonra bir olayın başlatılmasını istiyorsanız, (input) etkinliğini kullanabilirsiniz.

— John Gilmer

496

(change) klasik girdi değiştirme olayına bağlı olay.

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

Girişinizde bir model olmasa bile olayı (değiştir) kullanabilirsiniz.

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

(ngModelChange) bu @Output ngModel direktifin. Model değiştiğinde ateşlenir. Bu olayı ngModel yönergesi olmadan kullanamazsınız.

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

Kaynak kodda daha fazlasını keşfettiğinizde, (ngModelChange) yeni değeri yayar.

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

Yani bu tür bir kullanım yeteneğiniz var demektir:

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

Temel olarak, ikisi arasında büyük bir fark yok gibi görünüyor, ancak ngModelolaylar kullandığınızda güç kazanıyor [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
}

aynı şeyi " ngModelşeyler" olmadan denediğinizi varsayalım

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

1

Ngmodel nesnesiyle change olayı kullanıyorsam ne olur?

— Ramesh Rajendran

6

@RameshRajendran Cevabı geliştirdim. Yine de ngModel nesnesiyle change olayını kullanabilirsiniz, ancak change olayı olay parametresini geçer, ngModelChange olayı yeni bir değer geçirir.

— omeralper

1

Evet +1. Ama ctr + A kullanarak metin kutusundaki tüm değerleri temizlediğinizde ngmodelchange ile ilgili bir sorunum var, sonra ngModelChange tetiklemiyor.

— Ramesh Rajendran

6

<input (ngModelChange)="modelChanged($event)">doğru değil [ngModel], gerekli.

— e-bulut

3

Bir şey yapamazsın (change), bu durumda, yapabilirsin(onClick)="yourFunction(youParameter)"

— jpmottin

83

Açısal 7'de, (ngModelChange)="eventHandler()"ateş edeceği önce bağlı değer [(ngModel)]="value"ise değiştirilir (change)="eventHandler()"irade yangın sonrasında bağlı değere [(ngModel)]="value"değiştirilir.

— CAK2
kaynak

1

Açısal 7.1'de test ettim ve ngModel'den gelen değer, olay çağrılmadan önce güncellenir. Ben de bunu kullanıyorum

— Jahrenski

Açısal 6'da da çalıştı.

— Zamanımı

1

Bunun tersi değil mi? Açısal Dokümanlar göre ngModelChangegörünüm modeli güncellemeleri sonra ateş.

— öfke

3

Açısal son belgelerde bu durum açıklanmaktadır: angular.io/guide/...

— pioro90

4

Açısal 7.2'de (ngModelChange)olay gerçekten değer değiştirilmeden önce ve değiştirildikten (change) sonra tetiklenir . Bilgi için teşekkürler, süper yararlı!

— Dennis Ameling

15

Ben buldum ve yazdığı gibi başka konuda - bu açısal <7 için geçerlidir (7+ içinde nasıl olduğundan emin değilim)

Sadece gelecek için

bunun [(ngModel)]="hero.name"şekersizleştirilebilecek bir kısa yol olduğunu gözlemlememiz gerekir :[ngModel]="hero.name" (ngModelChange)="hero.name = $event" .

Yani eğer şekeri kaldırırsak aşağıdakilerle sonuçlanırdık:

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

veya

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

Yukarıdaki kodu incelerseniz, 2 ile sonuçlandığımızı göreceksiniz. ngModelChange olayla ve bunların bir sırayla yürütülmesi gerektiğini .

Özetle: Daha ngModelChangeönce yerleştirirseniz , yeni değeri ngModelalırsınız $event, ancak model nesneniz yine de önceki değeri tutar. Sonra yerleştirirseniz ngModel, model zaten yeni değere sahip olacaktır.

KAYNAK

— afet
kaynak

Bunu işaret ettiğiniz için teşekkür ederiz! Açıklamanızı bulana kadar bu sorunu yaşadım

— omostan

2

1 - (change) HTML değişim etkinliğine bağlıdır. HTML değiştirmeyle ilgili belgeler şunları söylüyor:

Kullanıcı bir <select>öğenin seçili seçeneğini değiştirdiğinde JavaScript çalıştırma

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

2 - Daha önce belirtildiği gibi (ngModelChange), girişinize bağlanan model değişkenine bağlıdır.

Benim yorumum:

(change)kullanıcı girişi değiştirdiğinde tetiklenir
(ngModelChange) model bir kullanıcı işlemine ardışık olsun veya olmasın, değiştiğinde tetiklenir

— Julien
kaynak