(schimba) vs (ngModelChange) în unghiulare

Unghiulare 1 nu accept onchange() eveniment, l's acceptă numai ng-schimba() eveniment.

Unghiulare 2, pe de altă parte, acceptă ambele (schimba) " și " (ngModelChange) evenimente, care pare a fi a face același lucru.

Ce's diferența?

care este cel mai bun pentru performanță?

ngModelChange:

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

vs schimbarea:

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>
Ramesh Rajendran
Întrebarea editată 15 octombrie 2019 в 5:19
Programare
javascript html angular typescript angular-ngmodelchange
30 iunie 2017 в 7:16
7 vizualizări
Comentarii la întrebare (6)
Soluția

(schimba) eveniment legat clasică de intrare schimba eveniment.

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

Puteți utiliza (schimba) eveniment, chiar dacă tu nu't au un model de la intrare ca

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

(ngModelChange) este `@Ieșire de ngModel directivă. Se declanșează atunci când modelul se schimbă. Nu puteți utiliza acest eveniment fără ngModel directivă.

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

Ca să descoperi mai multe în codul sursă, (ngModelChange) emite noua valoare.

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

Deci, aceasta înseamnă că aveți posibilitatea de a astfel de utilizare:

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

Practic, se pare că nu există nici o diferență mare între cele două, dar ngModel evenimente câștiguri puterea atunci când utilizați [ngValue]. 


  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">

          {{data.name}}
Michael
Răspuns editat 9 aprilie 2019 в 2:48
Comentarii (9)

În Unghiulare 7, (ngModelChange)="eventHandler()" va foc înainte valoarea obligat să [(ngModel)]="valoarea" este schimbat în timp ce(schimba)="eventHandler()"va foc **după** valoarea obligat să[(ngModel)]="valoarea" este schimbat.

Tiago supports GoFundMonica
Răspuns editat 27 decembrie 2018 в 11:54
Comentarii (7)

După cum am găsit și scris în alt subiect - acest lucru se aplică la unghiulare < 7 (nu sunt sigur cum e la 7+)

Doar pentru viitor

trebuie să observăm că [(ngModel)]="eroul.numele" este doar un scurt-cut, care pot fi de-zaharisit la: [ngModel]="eroul.numele" (ngModelChange)="eroul.nume = $evenimentului".

Deci, dacă am de-zahăr cod ne-ar termina cu:

<selectați (ngModelChange)="onModelChange()" [ngModel]="eroul.numele" (ngModelChange)="eroul.nume = $evenimentului">

sau

<[ngModel]="eroul.numele" (ngModelChange)="eroul.nume = $evenimentului" selectați (ngModelChange)="onModelChange()">

Dacă vă verificați codul de mai sus veți observa că vom ajunge cu 2 ngModelChange evenimente și acele trebuie să fie executate într-o anumită ordine.

Rezumând: Daca ai loc ngModelChange înainte ngModel, veți obține $eveniment ca noua valoare, dar modelul obiect deține încă valoarea anterioară. Dacă vă puneți-l după ngModel, modelul va avea deja noua valoare.

SURSA

Comentarii (0)