(verandering) vs (ngModelChange) in hoekig

Angular 1 accepteert geen onchange() event, het accepteert alleen ng-change() event.

Angular 2, aan de andere kant, accepteert zowel (change) als (ngModelChange) gebeurtenissen, die beide hetzelfde lijken te doen.

Wat is het verschil?

Welke is het beste voor de prestaties?

ngModelwijziging:

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

vs wijziging:

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>
Ramesh Rajendran
Bewerkte vraag 15de1 oktober 2019 в 5:19
Programmering
javascript html angular typescript angular-ngmodelchange
30ste4 juni 2017 в 7:16
9 views
Oplossing

(change) event gebonden aan klassieke input change event.

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

Je kunt (change) event ook gebruiken als je geen model bij je invoer hebt als

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

(ngModelChange) is de @Output van de ngModel directive. Het vuurt wanneer het model verandert. Je kunt dit event niet gebruiken zonder de ngModel directive.

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

Zoals je meer in de broncode ontdekt, (ngModelChange) zendt de nieuwe waarde uit.

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

Dus het betekent dat je de mogelijkheid hebt van dergelijk gebruik:

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

In principe lijkt het alsof er geen groot verschil is tussen de twee, maar ngModel gebeurtenissen winnen aan kracht als je [ngValue] gebruikt.


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

          {{data.name}}
Michael
Bewerkt antwoord 9de1 april 2019 в 2:48
Commentaren (9)

In Angular 7, zal de (ngModelChange)="eventHandler()" afgaan voordat de waarde gebonden aan [(ngModel)]="value" wordt gewijzigd terwijl de (change)="eventHandler()" zal afgaan na de waarde gebonden aan [(ngModel)]="value" wordt gewijzigd.

Tiago supports GoFundMonica
Bewerkt antwoord 27ste3 december 2018 в 11:54
Commentaren (7)

Zoals ik heb gevonden en schreef in een andere topic - dit geldt voor angular < 7 (niet zeker hoe het is in 7+)

Gewoon voor de toekomst

we moeten opmerken dat [(ngModel)]="hero.name" is gewoon een short-cut die kan worden de-sugared tot: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Dus als we de code ontsuikeren zouden we eindigen met:

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

of

``

Als je de bovenstaande code inspecteert zul je zien dat we eindigen met 2 ngModelChange events en die moeten in een bepaalde volgorde worden uitgevoerd.

Samenvattend: Als je ngModelChange voor ngModel plaatst, krijg je de $event als de nieuwe waarde, maar je model object houdt nog steeds de vorige waarde. Als je het na ngModel plaatst, zal het model al de nieuwe waarde hebben.

BRON

Commentaren (0)