“typeof Observable”类型6上不存在fromEvent的此属性

Question

我在尝试创建将keyup事件转换为可观察流时遇到问题。

我正在学习Ng书籍第6版。我被困在一个示例中，在您键入时搜索YouTube视频。当搜索返回时，我们将显示视频缩略图结果列表，以及每个视频的描述和链接。

因此，我们使用observable.from事件：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监听元素上的事件的方法。observable.from事件。

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

但是我得到了这个错误：

src/app/search ch-box/search-box.component.ts（42,13）中的错误：错误TS2339：类型为可观测的类型上不存在属性'fromevent'。

I RxJS 6 Observable和fromEvent的导入如下所示：

import { Observable, fromEvent } from 'rxjs';

这是我在Angular 6中的RxJs5版本的代码：（它不起作用）

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上不存在属性“map”{

在命令行中，运行ng serve后：

搜索框/搜索框中出现错误。组成部分ts（40,4）：错误TS1135:参数

但是，它不起作用。。。那么，我应该如何将我的烟斗写入Tax？

我的研究进展如何：

1. Ng-book的留档已经过时了。
2. 角度导向器的留档是不同的。
3. 我在GitHub上打开一个问题，但是他们把我送回这里

Answer 1

在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迁移指南。

Answer 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的工作演示：演示Angular 6 Rxjs 6