wake-up-neo.com

(change) vs (ngModelChange) in angular

Angular 1 akzeptiert das Ereignis onchange nicht, sondern nur das Ereignis ng-change.

Winkel 2 hingegen akzeptiert beide Ereignisse (change) und (ngModelChange), die beide dasselbe zu tun scheinen.

Was ist der Unterschied?

welches ist am besten für die Leistung?

ngModelChange:

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

vs ändern:

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>
javascripthtmlangulartypescriptangular-ngmodelchange
221
Ramesh Rajendran

(change) -Ereignis, das an das klassische Eingabeänderungsereignis gebunden ist.

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

Sie können event auch dann verwenden (ändern), wenn Sie kein Modell als eingegeben haben

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

(ngModelChange) ist der @Output der ngModel-Direktive. Es wird ausgelöst, wenn sich das Modell ändert. Sie können dieses Ereignis nicht ohne die Anweisung ngModel verwenden.

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

Wie Sie im Quellcode erfahren, gibt (ngModelChange) den neuen Wert aus.

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

Das bedeutet, dass Sie über die folgenden Nutzungsmöglichkeiten verfügen:

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

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

Grundsätzlich scheint es keinen großen Unterschied zwischen zwei zu geben, aber ngModel Ereignisse erhalten die Kraft, wenn Sie [ngValue] verwenden.

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

angenommen, Sie versuchen dasselbe ohne "ngModel things".

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

In Angular 7 wird der (ngModelChange)="eventHandler()" ausgelöst vor der an [(ngModel)]="value" gebundene Wert wird geändert, während der (change)="eventHandler()" ausgelöst after Der an [(ngModel)]="value" gebundene Wert wird geändert.

43
CAK2

Wie ich in ein anderes Thema gefunden und geschrieben habe - dies gilt für angular <7 (nicht sicher, wie es in 7+ ist)

Nur für die Zukunft

wir müssen beachten, dass [(ngModel)] = "hero.name" nur eine Abkürzung ist, die entzuckert werden kann zu: [ngModel] = "hero.name" (ngModelChange) = "hero.name = $ event ".

Wenn wir also den Zuckercode entfernen, erhalten wir:

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

oder

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

Wenn Sie den obigen Code überprüfen, werden Sie feststellen, dass es am Ende zu 2 ngModelChange-Ereignissen kommt, die in einer bestimmten Reihenfolge ausgeführt werden müssen.

Fazit: Wenn Sie ngModelChange vor ngModel platzieren, wird das $ -Ereignis als neuer Wert angezeigt, das Modellobjekt behält jedoch weiterhin den vorherigen Wert. Wenn Sie platzieren Nach ngModel hat das Modell bereits den neuen Wert.

SOURCE

1
Disaster