web-dev-qa-db-fra.com

ionique: l'événement de changement n'est pas déclenché sur <entrée-ion> lorsque la valeur d'entrée est modifiée à partir d'un script externe

Je veux appeler la fonction chaque fois que l'entrée est modifiée.

J'ai créé les éléments suivants dans mon fichier home.html

<ion-input type="text" class="scoreboardus" [(ngModel)]='text' 
      (input)='onInputTime($event.target.value)' (change)='onChangeTime($event.target.value)'>
   </ion-input>

et dans le fichier home.ts

onChangeTime() {
  alert('onChangeTime called');
}

onInputTime() {
  alert('onInputTime called');
}

le code ci-dessus fonctionne bien si vous donnez manuellement des valeurs dans le champ de saisie.

Mon problème:

Je change la valeur d'entrée d'un fichier javascript externe.

$('.scoreboardus input').val(200).trigger('onchange');

Le code ci-dessus modifie la valeur du champ de saisie… Mais la fonction n'est pas appelée

le code résultant devrait fonctionner après la création d'une application.

ionic-framework
11
Sugumar Venkatesan

Vous devez utiliser (ionChange) au lieu de (changer).

<ion-input type="text" class="scoreboardus" [(ngModel)]='text' (input)='onInputTime($event.target.value)' (ionChange)='onChangeTime($event.target.value)'>
11
Fabio Campinho

Avez-vous installé le Jquery dans votre ionic-2 comme suit 

Installer Jquery

 npm install jquery --save

Après cela, installez le dérecteur global JQuery pour les typages (vous pouvez l'importer):

typings install dt~jquery --global --save

Ensuite, vous pouvez importer JQuery dans vos "home.ts"

import * as $ from 'jquery'

Maintenant, essayez votre fonction Jquery comme suit:

$('.scoreboardus input').val(200).trigger('change');

Update: Vous pouvez affecter une variable de référence de modèle à la, comme # ionInput1, récupérer son élément natif (via @ViewChild) dans la classe de composant, puis utiliser jQuery pour écouter l'événement de modification .

   import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

    @Component({
      selector: 'my-app',
      template: `
      <h1>Firing Jquery</h1>
      <hr>
     <ion-input type="text" class="scoreboardus" [(ngModel)]='text' 
      (input)='onInputTime($event.target.value)' (change)='onChangeTime($event.target.value)' #ionInput1>
   </ion-input>
      })
    export class AppComponent implements AfterViewInit  {

      @ViewChild('ionInput1') ionInput1:ElementRef;

      ngAfterViewInit() {
        $(this.ionInput1.nativeElement).on('change', (e) => {
          console.log('Change made -- ngAfterViewInit');
          this.onChangeTime(e);
        });
      }

      onChangeTime(): void{
        console.log('Change made -- onChangeTime');
      }

    }

Pour plus d'informations, référez-vous SO Solution

4
Webruster

Il y a deux points noirs sur votre chemin, ce que nous ne pouvons pas contrôler. Elles sont:
1. (change)='onChangeTime($event.target.value)'. Je ne suis pas sûr de savoir comment Ionic bind change fonctionne. Peut-être que ce n'est pas pareil avec la fonction change de input. Donc, nous ne pouvons pas le contrôler.
2. $(...).trigger('onchange') nous ne pouvons pas contrôler comment Jquery le déclenche .

Donc, il suffit de faire ce que nous savons et nous pouvons contrôler . C'est du javascript pur.

<ion-input type="text" class="scoreboardus" [(ngModel)]='text'> </ion-input>

Vous devriez ajouter onChange listener par javascript:

ionViewDidEnter() { 
    let input = <HTMLInputElement>document.querySelector('.scoreboardus input');
    input.addEventListener('change', (event) => {
      console.log("onChange function fired");
      //Your onChange function here. Do what you want
      this.text = event.target["value"];
    })

    //Now we try to change your input value by javascript
    setTimeout(() => {
      input.value = "Hey. Im changing";

      //Trigger onChange function manually
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);
      input.dispatchEvent(evt);
      console.log("I'm done");
    }, 3000)
  }
3
Duannx

Vous êtes très proche de ce que vous recherchez. 

Votre code a un petit problème

$('.scoreboardus input').val(200).trigger('onchange');
                                           ^^^^^^^^^

Au lieu de onchange, vous devez utiliser change pour déclencher l'action. on ne doit pas être ajouté comme préfixe. Le nom de l'événement doit être identique à celui que nous utilisons dans la fonction on() dans jQuery ou dans addEventListener en JavaScript.

$('.scoreboardus input').val(200).trigger('change');

onchange ne fonctionnera pas

$(document).ready(function(){
  $('#ip').on('change',function(){
    alert(this.value);
  });
  $('#btn').click(function(){
    $('#ip').val('test').trigger('onchange');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ip" />
<button id="btn">Change</button>

vous devez utiliser change à la place

$(document).ready(function(){
  $('#ip').on('change',function(){
    alert(this.value);
  });
  $('#btn').click(function(){
    $('#ip').val('test').trigger('change');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ip" />
<button id="btn">Change</button>

Votre code ne fonctionne que lorsque vous le modifiez manuellement, car les modifications apportées par les scripts ne déclencheront pas l'écouteur d'événements. Vous devez le déclencher manuellement.

Notez également que vous devez utiliser la fonction de flèche ()=>{} dans Angular et ajouter le code jQuery dans ngAfterViewInit, seuls les éléments dynamiques seront alors pris en charge dans angular

2
Sagar V

Utiliser l'événement keyup, cela déclenche automatiquement les gestionnaires d'événements et fonctionne pour moi 

0
jireh

essaye ça :

 <ion-item>
    <ion-input [(ngModel)]="nickname" (keypress)="onChange($event)" ></ion-input>
  </ion-item>
0
ahmedelsayed