Это свойство fromEvent не существует для типа "typeof Observable" Angular 6

у меня проблема с попыткой создать, чтобы превратить keyup события в наблюдаемый поток.

Я следую версии Ng-book 6. Я застрял в Примере, который делает поиск видео YouTube по мере ввода. Когда поиск вернется, мы покажем список результатов миниатюр видео, а также описание и ссылку на каждое видео.

поэтому для этого мы используем наблюдаемый.fromEvent: https://github.com/NiLinli/ng-book2-angular-6-r68-code-samples/blob/master/http/src/app/you-tube-search/search-box.component.ts

в RxJS 5 он предоставляет способ прослушивания событий на элементе с помощью Rx.Заметный.fromEvent. 

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

, но я получаю эту ошибку:

ошибка в src / app / search-box / search-box.деталь.ts (42,13): ошибка TS2339: свойство "fromEvent" не существует для типа " typeof Наблюдаемые'.

I RxJS 6 импорт для Observable и fromEvent выглядит следующим образом:

import { Observable, fromEvent } from 'rxjs';

Это мой код для версии RxJs5 в Angular 6: (он не работает)

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

Это моя попытка с RxJs 6 и angular 6 (он обновляется в соответствии с последним ответом)

Я пытаюсь использовать синтаксис трубы: 

    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
            )

но у меня есть эта ошибка:

свойство "карта" не существует на введите Observable{}

и в командной строке после запуска ng serve:

ошибка в поле поиска / search-box.деталь.ts (40,4): ошибка TS1135: аргумент > ожидаемое выражение. поле поиска / search-box.деталь.ts (54,4): ошибка TS1128: объявление или > ожидаемый оператор.

но это не работает... Итак, как я должен написать свою трубку синтакс?

как идут мои исследования on:

  1. документация из Ng-book устарела.
  2. документации угловое руководство разное.
  3. открыть выпуск на GitHub, но они посылают мне сюда
9
angular observable rxjs

2 ответов

Это должно работать в вашем случае :

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
        )

надеюсь, что это помогает !

редактировать Вот рабочая демонстрация на Stackblitz:Демо Угловой 6 + Rxjs 6

15

в RxJS 5, Вы писали

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

импорт изменился для RxJS 6

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

для получения дополнительной информации, посмотрите на RxJS руководство по миграции.

5