web-dev-qa-db-fra.com

Cette propriété fromEvent n’existe pas sur le type 'typeof Observable' Angular 6

J'ai un problème en essayant de créer pour transformer les événements keyup en un flux observable.

Je suis la version 6 de Ng-book. Je suis coincé dans un exemple qui permet de rechercher une vidéo YouTube au fur et à mesure de la frappe. Lorsque la recherche sera renvoyée, nous afficherons une liste des résultats de vignettes vidéo, ainsi qu'une description et un lien vers chaque vidéo.

Donc, pour cela, nous utilisons observable.fromEvent: https://github.com/NiLinli/ng-book2-angular-6-r68-code-samples/blob/master/http/src/app/you -tube-search/search-box.component.ts

Dans RxJS 5, il permet d'écouter les événements d'un élément à l'aide de Rx.Observable.fromEvent.

ngOnInit(): void {
// convert the `keyup` event into an observable stream
Observable.fromEvent(this.el.nativeElement, 'keyup')

Mais je reçois cette erreur:

ERREUR dans src/app/zone de recherche/zone de recherche.component.ts (42,13): erreur TS2339: la propriété 'fromEvent' n'existe pas sur le type 'typeof Observable'.

Je RxJS 6 l'importation pour Observable et fromEvent est comme ceci:

import { Observable, fromEvent } from 'rxjs';

Ceci est mon code pour la version RxJs5 dans Angular 6: (cela ne fonctionne pas)

Observable.fromEvent(this.el.nativeElement, 'keyup')
.map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length > 1) // filter out if empty 
.debounceTime(250) // only once every 250ms 
.do(() => this.loading.emit(true)) // enable loading
      // search, discarding old events if new input comes in
.map((query: string) => this.youtube.search(query)) 
.switch()

Ceci est mon essai avec les RxJs 6 et angular 6 (il est mis à jour en fonction de la dernière réponse)

J'essaie d'utiliser la syntaxe du tuyau:

    const obs = fromEvent(this.el.nativeElement, 'keyup')
        .pipe (
            .map((e:any) => e.target.value) // extract the value of the input

            // .filter((text:string) => text.length > 1) //filter out if empty

            .debounceTime(250) //only search after 250 ms

            .tap(() => this.loading.emit(true)) // Enable loading
            // search, call the search service

            .map((query:string) => this.youtube.search(query)) 
            // discard old events if new input comes in

            .switchAll()
            // act on the return of the search
            )

Mais j'ai cette erreur:

La propriété 'map' n'existe pas sur le type Observable {<>}

Et dans la ligne de commande, après l'exécution, sers:

ERREUR dans le champ de recherche/search-box.component.ts (40,4): erreur TS1135: Argument> expression attendue. search-box/search-box.component.ts (54,4): erreur TS1128: Une déclaration ou une instruction> attendue.

Mais ça ne marche pas ... Alors, comment dois-je écrire mon sintax de pipe?

Comment se déroulent mes recherches:

  1. La documentation du livre Ng est obsolète.
  2. La documentation du guide angulaire est différente.
  3. J'ouvre un Issue sur GitHub, mais ils me renvoient ici
angularrxjsobservable
25
ValRob

Cela devrait fonctionner dans votre cas:

import { fromEvent } from 'rxjs';
import { map, filter, debounceTime, tap, switchAll } from 'rxjs/operators';

  const obs = fromEvent(this.el.nativeElement, 'keyup')
    .pipe (
        map((e:any) => e.target.value), // extract the value of the input

        // filter((text:string) => text.length > 1), //filter out if empty

        debounceTime(250), //only search after 250 ms

        tap(() => this.loading.emit(true)), // Enable loading
        // search, call the search service

        map((query:string) => this.youtube.search(query)) ,
        // discard old events if new input comes in

        switchAll()
        // act on the return of the search
        )

J'espère que ça aide !

[~ # ~] edit [~ # ~] Voici une démo de travail sur Stackblitz: Demo Angular 6 + Rxjs 6

30
GeoAstronaute

Dans RxJS 5, vous écriviez

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

Les importations ont changé pour RxJS 6

import { Observable, of, Subject, Subscription } from 'rxjs';
import { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';

Pour plus d'informations, consultez le guide de migration RxJS .

10
MatthiasSommer