onchange equivalente en angular2

91

Estoy usando onchange para guardar el valor de mi rango de entrada en firebase, pero tengo un error que dice que mi función no está definida.

esta es mi función

saverange(){
  this.Platform.ready().then(() => {
    this.rootRef.child("users").child(this.UserID).child('range').set(this.range)
  })
}

este es mi html

<ion-item>
  <ion-row>
    <ion-col>Rayon <span favorite><strong> {{range}} km</strong></span></ion-col>
    <ion-col><input type="range" name="points" min="0" max="40" [(ngModel)]="range" onchange="saverange()"></ion-col>
  </ion-row>
</ion-item>

¿Cuál es el equivalente de un cambio en angular, si existe? gracias

angular PrinceZee
fuente
1
(change), Quedan 5 más
Eric Martinez

Respuestas:

174

Podemos usar enlaces de eventos angulares para responder a cualquier evento DOM . La sintaxis es simple. Rodeamos el nombre del evento DOM entre paréntesis y le asignamos una declaración de plantilla entre comillas. - referencia

Dado que changeestá en la lista de eventos DOM estándar , podemos usarlo:

(change)="saverange()"

En su caso particular, dado que está utilizando NgModel, podría romper el enlace bidireccional de esta manera:

[ngModel]="range" (ngModelChange)="saverange($event)"

Entonces

saverange(newValue) {
  this.range = newValue;
  this.Platform.ready().then(() => {
     this.rootRef.child("users").child(this.UserID).child('range').set(this.range)
  })
}

Sin embargo, con este enfoque saverange()se llama con cada pulsación de tecla, por lo que probablemente sea mejor usarlo (change).

Mark Rajcok
fuente
Curiosamente, esto no me funciona por alguna razón, la función no se activa ... No estoy seguro de por qué. Parece que en la versión reciente de Angular tienes que usar (entrada), para el elemento de entrada de tipo texto.
Vladimir Despotovic
10

En Angular puede definir event listenerscomo en el siguiente ejemplo:

<!-- Here you can call public methods from parental component -->
<input (change)="method_name()">
Kuldeep Kumar
fuente
3
por favor considere agregar más información en su respuesta
Inder
3

@Mark Rajcok brindó una excelente solución para proyectos de iones que incluyen una entrada de tipo de rango.

En cualquier otro caso de proyectos no iónicos, sugeriré esto:

HTML:

<input type="text" name="points" #points maxlength="8" [(ngModel)]="range" (ngModelChange)="range=saverange($event, points)">

Componente:

    onChangeAchievement(eventStr: string, eRef): string {

      //Do something (some manipulations) on input and than return it to be saved:

       //In case you need to force of modifing the Element-Reference value on-focus of input:
       var eventStrToReplace = eventStr.replace(/[^0-9,eE\.\+]+/g, "");
       if (eventStr != eventStrToReplace) {
           eRef.value = eventStrToReplace;
       }

      return this.getNumberOnChange(eventStr);

    }

La idea aquí:

  1. Dejando que el (ngModelChange)método haga el trabajo de Setter:

    (ngModelChange)="range=saverange($event, points)

  2. Habilitando el acceso directo al elemento Dom nativo usando esta llamada:

    eRef.value = eventStrToReplace;

Dudi
fuente