Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

618
Visualizações
(cambio) vs (ngModelChange) en angular

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

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"/>
over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

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

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

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

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

(ngModelChange) es la directiva @Output de 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 tienes 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 eventos ngModel ganan poder cuando 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 "cosas ngModel "

 <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 }
over 4 years ago · Santiago Trujillo Relatório

0

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

over 4 years ago · Santiago Trujillo Relatório

0

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

Solo para el futuro

debemos observar que [(ngModel)]="hero.name" es solo un atajo que se puede reducir 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 eventos ngModelChange y deben ejecutarse en algún orden.

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

FUENTE

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda