(cambio) vs (ngModelChange) en angular

360
Ramesh Rajendran 2017-06-30 21:16.

Angular 1 no acepta onchange()eventos, solo acepta ng-change()eventos.

Angular 2, por otro lado, acepta eventos (change)y (ngModelChange), que parecen estar haciendo lo mismo.

¿Cual es la diferencia?

¿cuál es mejor para el rendimiento?

ngModelChange :

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

vs cambio :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>
javascript html angular typescript angular-ngmodelchange

5 answers

542
omeralper 2017-07-13 22:16.

(change) evento vinculado al evento de cambio de entrada clásico.

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

Puede usar (cambiar) el evento incluso si no tiene un modelo en su entrada como

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

(ngModelChange)es la @Outputde la directiva ngModel. Se dispara cuando cambia el modelo. No puede usar este evento sin la directiva ngModel.

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

A medida que descubre más en el código fuente, (ngModelChange)emite el nuevo valor.

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

Entonces significa que tiene la capacidad de tal uso:

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

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

Básicamente, parece que no hay una gran diferencia entre dos, pero los ngModeleventos ganan poder cuando los usas [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
}

suponga que intenta lo mismo sin " ngModelcosas"

<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
}
101
CAK2 2018-12-27 14:30.

En Angular 7, (ngModelChange)="eventHandler()"se disparará antes de que [(ngModel)]="value"se cambie el valor vinculado, mientras que (change)="eventHandler()"se disparará después de que [(ngModel)]="value"se cambie el valor vinculado .

23
Disaster 2019-07-26 01:00.

Como encontré y escribí en otro tema, esto se aplica a angular <7 (no estoy seguro de cómo es en 7+)

Solo para el futuro

hay que observar que [(ngModel)]="hero.name"es sólo un atajo que puede ser azucarado-de a: [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Entonces, si eliminamos el azúcar del código, terminaríamos con:

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

o

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

Si inspecciona el código anterior, notará que terminamos con 2 ngModelChangeeventos y esos deben ejecutarse en algún orden.

Resumiendo: si coloca ngModelChangeantes ngModel, obtiene $eventcomo el nuevo valor, pero su objeto modelo aún tiene el valor anterior. Si lo coloca después ngModel, el modelo ya tendrá el nuevo valor.

FUENTE

4
Julien 2020-02-21 03:46.

1: (change) está vinculado al evento onchange de HTML. La documentación sobre HTML onchange dice lo siguiente:

Ejecutar un JavaScript cuando un usuario cambia la opción seleccionada de un <select>elemento

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

2 - Como se indicó anteriormente, (ngModelChange)está vinculado a la variable modelo vinculada a su entrada.

Entonces, mi interpretación es:

  • (change)se activa cuando el usuario cambia la entrada
  • (ngModelChange) se activa cuando cambia el modelo, ya sea consecutivo a una acción del usuario o no
0
Harel Levy 2020-10-12 13:10.

Para un aumento real del rendimiento del enlace en angular, realmente recomiendo también usar changeDetection: ChangeDetectionStrategy.OnPushen su decorador de componentes, y actualizar la detección de cambios manualmente cuando sea necesario usando los métodos detectChangeso markForCheckdel servicio ChangeDetectionRef.

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

Related questions

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que le diagnosticaron envenenamiento por mercurio y plomo, probablemente debido a su trabajo como manipuladora de casas.

2022-12-22.

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Recientemente salió a la luz un informe policial que acusa a la estrella de 'Love Is Blind', Brennon, de violencia doméstica. Ahora, Brennon ha respondido a los reclamos.

2022-12-14.

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Conozca cómo Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia mientras organizaba la primera celebración de Acción de Gracias desde que murió su madre, Naomi Judd.

2022-12-09.

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Descubra por qué un destacado experto en lenguaje corporal cree que es fácil trazar "tales paralelismos" entre la princesa Kate Middleton y la princesa Diana.

2022-12-07.

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los inodoros arrojan columnas de aerosol invisibles con cada descarga. ¿Como sabemos? La prueba fue capturada por láseres de alta potencia.

2022-12-09.

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

2022-09-02.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

2022-07-29.

¿Caduca el repelente de insectos?

¿Caduca el repelente de insectos?

¿Sigue siendo efectivo ese lote de repelente de insectos que te quedó del verano pasado? Si es así, ¿por cuánto tiempo?

2022-06-08.

Estados Unidos podría evitarse el horror del nuevo gran horneado británico

Estados Unidos podría evitarse el horror del nuevo gran horneado británico

Si este tráiler de pesadilla de la temporada más reciente de Great British Bake Off te asustó y te hizo no volver a ver el programa, es posible que tengas suerte: PBS no ha decidido si se transmitirá o no la última temporada en los Estados Unidos. actualización, para aquellos que no siguen sin aliento este tipo de drama de nicho: el presentador Paul Hollywood y la hermosa carpa llena de batidoras de colores pastel y cuadros se trasladaron de la BBC al Canal 4; Mary Berry, Sue Perkins y Mel Giedroyc renunciaron.

2023-03-30 05:05.

Atún como Oh, Hello llega a Netflix

Atún como Oh, Hello llega a Netflix

Foto: Netflix Oh, Hello On Broadway (Netflix): Después de llegar a Broadway el año pasado, los dos locos del Upper West Side interpretados por John Mulaney y Nick Kroll finalmente llegaron a Netflix. El especial consta del espectáculo en el escenario, algunos momentos entre bastidores y un invitado muy especial de “Too Much Tuna”.

2023-03-30 05:01.

Actualice a un Sonicare por tan solo $ 30

Actualice a un Sonicare por tan solo $ 30

¿Quiere probar un cepillo de dientes Sonicare sin gastar mucho dinero en uno de sus modelos favoritos de gama alta? Puede comprar un kit de la Serie 2 o Serie 3 por tan solo $ 30 hoy en Amazon. Haga clic aquí para ver la lista completa de modelos elegibles y tenga en cuenta que se descontarán $ 10 adicionales en su carrito.

2023-03-29 11:42.

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Tapas elásticas de silicona de Tomorrow's Kitchen, paquete de 12 | $14 | Amazonas | Código promocional 20OFFKINJALids son básicamente los calcetines de la cocina; siempre perdiéndose, dejando contenedores huérfanos que nunca podrán volver a cerrarse. Pero, ¿y si sus tapas pudieran estirarse y adaptarse a todos los recipientes, ollas, sartenes e incluso frutas en rodajas grandes que sobran? Nunca más tendrás que preocuparte por perder esa tapa tan específica.

2022-11-02 18:37.

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

El equipo está a la espera de las medallas que ganó en los Juegos Olímpicos de Invierno de 2022 en Beijing, ya que se está resolviendo un caso de dopaje que involucra a la patinadora artística rusa Kamila Valieva.

2023-02-03.

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Miles de compradores de Amazon recomiendan la funda de almohada de seda Mulberry, y está a la venta en este momento. La funda de almohada de seda viene en varios colores y ayuda a mantener el cabello suave y la piel clara. Compre las fundas de almohada de seda mientras tienen hasta un 46 por ciento de descuento en Amazon

2023-02-03.

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

El jueves se presentó una denuncia de delito menor amenazante agravado contra Joe Mixon.

2023-02-03.

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

El Departamento de Policía de Lafayette comenzó a investigar a un profesor de la Universidad de Purdue en diciembre después de recibir varias denuncias de un "hombre sospechoso que se acercaba a una mujer".

2023-02-03.

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Al igual que el mundo que nos rodea, el lenguaje siempre está cambiando. Mientras que en eras anteriores los cambios en el idioma ocurrían durante años o incluso décadas, ahora pueden ocurrir en cuestión de días o incluso horas.

India me está pateando el culo

India me está pateando el culo

Estoy de vuelta por primera vez en seis años. No puedo decirte cuánto tiempo he estado esperando esto.

ℝ

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

¿Merrick Garland le ha fallado a Estados Unidos?

Es más de la mitad de la presidencia de Biden. ¿Qué está esperando Merrick Garland?

¿Merrick Garland le ha fallado a Estados Unidos?

Creo, un poco tarde en la vida, en dar oportunidades a la gente. Generosamente.

Language

Japanese
Spanish
German
French
Thai
Portuguese
Russian
Vietnamese
Italian
Korean
Turkish
Indonesian
Polish
Hindi