Comment utiliser l'objet et de l'anti-rebond avec RxJs 5 à partir d'une chaîne d'entrée

Je ne comprends pas comment le Sujet de l'objet serait de travailler pour un Suggestion/service de Recherche que je suis en train de mettre en œuvre dans Angular2.

Disons que generateSuggestions est appelée chaque fois qu'un changement d'entrée, pour une saisie semi-automatique utilisation.

Je ne comprends pas pourquoi je ne suis pas en mesure de tirer quelque chose de la "next()" appel, texte dactylographié compilateur dit que c'est de retourner un type void.

Mon objectif serait de soumettre chaque modification d'un objet, qui va décider de s'appeler les uns les 500ms une fonction sur le serveur, sans que le spamming sur chaque entrée de clé.

import { Jsonp, Response, Http } from 'angular2/http';
import * as Rx from 'rxjs/Rx';
import { Injectable } from 'angular2/core';

@Injectable()
export class SearchService {
    queryStream = new Rx.Subject();

    constructor(public http: Http) {

    }

    generateSuggestions(query: string) {
        this.queryStream
            .next(query)
            .debounce(500) //Compiler error: Debounce does not exist on type "void"
            .map(
                query => this.http.get('hellow')
                        .map( (res: Response) => res.json() )
                        .subscribe( results => console.log(results) )
            );
    }
}

Je peux le faire dans la plaine JS/Tapuscrit mais je voulais vraiment essayer de travailler avec RxJs car il est déjà utilisé par Angular2.

Quelles sont les erreurs commises ici? La documentation est vraiment pauvre, sans aucun exemple sur leur site officiel.

  • Vous devriez regarder cette vidéo pour voir comment faire un typeahead.
  • J'ai fait quelques modifications après avoir vu cette vidéo, et la rxJs sujet ne fait pas partie du service plus.
InformationsquelleAutor Micaël Félix | 2015-12-29
  1. 10

    Remarque: si vous avez une meilleure solution, il vous suffit de poster une autre réponse et je vais choisir comme réponse.

    Mes résultats ont montré que je n'étais pas bien comprendre le but de Rx.Sujet.

    Solution proposée à l'aide ngModel et ngModelChange

    Parce que j'ai actuellement seulement utiliser ngModel dans mes composants, j'ai dû couper le [(ngModel)] à [ngModel] et (ngModelChange)

    Dans le composant constructeur

    Utiliser un Rx.Sujet (en théorie c'est la même chose qu'un EventEmitter, mais peut-être que ça a changé depuis, car nous n'avons pas accès à toutes les Rx.L'objet des méthodes plus) qui sera paramétré pour antirebond et appeler le service pour récupérer des valeurs.

    Pour chaque séquence de touches:

    Input -> (ngModelChange) -> eventEmitterComponentInstance.prochaine(InputValue)

    Code

    SuggestMultipleStringComponent.ts

    @Component({
  template: `<input [ngModel]="userInput"
                    (ngModelChange)="userInputChanged($event)" />`
  providers: [SearchService]
})
export class SuggestMultipleStringComponent { 
    private typeAheadEventEmitter = new Rx.Subject<string>();
    private userInput: string;

    constructor(private _searchService: SearchService) {
        this.typeAheadEventEmitter
                .debounceTime(700)
                .switchMap(val => {
                    console.log('called once')
                    return this._searchService.callSomething();
                }).subscribe(results => {
                    console.log(results);
                }, error => {
                    console.log('error logged:');
                    console.log(error);
                });
      }

    userInputChanged(value: string) {
        this.userInput = value;
        this.typeAheadEventEmitter.next(value);
    }
}

    SearchService.ts

    @Injectable()
export class SearchService {

    constructor(private http: Http) {
        this.http = http;
    }

    callSomething() {
        return this.http.get('some/url')
                        .map((res: Response) => res.json());
    }
}
    InformationsquelleAutor Micaël Félix