Comment faire pour réaliser un service de debounce sur l'événement keyup d'entrée dans angular2 avec rxjs

Je suis en train d'appeler à un service sur la touche d'entrée d'événement.

Le code HTML

<input placeholder="enter name" (keyup)='onKeyUp($event)'>

Ci-dessous est la onKeyUp() fonction

onKeyUp(event) {
    let observable = Observable.fromEvent(event.target, 'keyup')
        .map(value => event.target.value)
        .debounceTime(1000)
        .distinctUntilChanged()
        .flatMap((search) => {
            //call the service
        });
    observable.subscribe((data) => {
        //data
    });
}

Il a été trouvé à partir de l'onglet réseau du navigateur, c'est l'appel de la clé de fonction sur chaque événement haut(comme il est censé le faire), mais ce que je suis en train de réaliser est un anti-rebond du temps de 1sec entre chaque appel de service. Aussi, l'événement est déclenché lorsque je déplace la flèche déplacer.

plunkr lien

source d'informationauteur varun | 2017-01-30

  1. 28

    Si la chaîne est vraiment correct, mais le problème, c'est que vous êtes en train de créer l'Observable et l'abonnement à chaque keyup événement. C'est pourquoi il imprime la même valeur à plusieurs reprises. Il y a simplement plusieurs abonnements qui n'est pas ce que vous voulez faire.

    Il y a évidemment plusieurs façons de le faire correctement, par exemple: 

    @Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" (keyup)='keyUp.next($event)'>
    </div>
  `,
})
export class App {
  name:string;

  public keyUp = new Subject<string>();

  constructor() {
    const subscription = this.keyUp
      .map(event => event.target.value)
      .debounceTime(1000)
      .distinctUntilChanged()
      .flatMap(search => Observable.of(search).delay(500))
      .subscribe(console.log);
  }
}

    Voir votre mise à jour de la démo: http://plnkr.co/edit/mAMlgycTcvrYf7509DOP

  2. 2

    Je voudrais vous suggérer de vérifier la Angular2 Tutoriel qui montrent un environnement propre et expliqué exemple de quelque chose de semblable à ce que vous demandez.

    https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#observables

  3. 0

    Bien, voici une base debouncer. 

    ngOnInit ( ) {
        let inputBox = this.myInput.nativeElement;
        let displayDiv = this.myDisplay.nativeElement;

        let source = Rx.Observable.fromEvent ( inputBox, 'keyup' )
            .map ( ( x ) => { return x.currentTarget.value; } )
            .debounce ( ( x ) => { return Rx.Observable.timer ( 1000 ); } );

        source.subscribe (
            ( x ) => { displayDiv.innerText = x; },
            ( err ) => { console.error ( 'Error: %s', err ) },
            () => {} );
    }
}

    Si vous configurez les deux indiqué vue des enfants (l'entrée et l'affichage), vous verrez l'antirebond de travail. Vous ne savez pas si ce n'est pas faire quelque chose de votre fait, mais cette forme de base est (autant que je sache) la façon simple d'anti-rebond, j'utilise ce point de départ tout à fait un peu, l'ensemble de l'intérieur du texte est juste un exemple, il pourrait faire un appel de service ou tout autre chose dont vous avez besoin.