Diese Eigenschaft fromEvent existiert nicht auf Typ 'typeof Beobachtbaren' Winkel 6

Ich habe ein problem, die versuchen, um zu drehen Sie das keyup Ereignisse in eine beobachtbare stream.

Ich bin nach dem Ng-book-version 6.
Ich stecke in einem Beispiel, dass eine Suche YouTube-video, wie Sie geben. Wenn die Suche gibt wir zeigen eine Liste der video-thumbnail-Ergebnisse, zusammen mit einer Beschreibung und link zum jeweiligen video.

Also, für dieses, verwenden wir eine 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

In RxJS 5 bietet es die Möglichkeit, zu hören auf Ereignisse, die auf ein element mit Rx.Beobachtbar ist.fromEvent.

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

Aber ich bin immer diese Fehlermeldung:

FEHLER in src/app/search-box/search-box.Komponente.ts(42,13): Fehler
TS2339: Eigenschaft 'fromEvent' existiert nicht auf Typ 'typeof
Beobachtbare'.

Ich RxJS 6 der import für Beobachtbare und fromEvent ist wie folgt:

import { Observable, fromEvent } from 'rxjs';

Dies ist mein code für die RxJs5 version in den Winkel-6: (es funktioniert nicht)

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()

Dies ist mein Versuch mit RxJs 6 und eckig 6 (aktualisiert nach der letzten Antwort)

Ich versuche zu verwenden die pipe-syntax:

    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
            )   

Aber ich habe diesen Fehler:

Eigenschaft 'anzeigen' nicht vorhanden Typ Observable{<>}

Und in die Befehlszeile nach Ausführung ng dienen:

FEHLER in der Suche-box/search-box.Komponente.ts(40,4): Fehler TS1135: Argument > Ausdruck erwartet.
Suche-box/search-box.Komponente.ts(54,4): Fehler TS1128: Erklärung > statement erwartet.

Aber es funktioniert nicht... So, wie soll ich schreiben, mein pipe-Syntax?

Wie ist meine Forschung geht:

  1. Die Dokumentation aus der Ng-Buch ist veraltet.
  2. Die Dokumentation aus der Winkel-guide ist anders.
  3. Ich öffne eine Issue auf GitHub aber schicken Sie mich wieder hier
InformationsquelleAutor ValRob | 2018-05-28
Schreibe einen Kommentar