代码之家 › 专栏 › 技术社区 › ValRob

“typeof observable”angular 6类型上不存在此fromEvent属性

observable rxjs angular

ValRob · 技术社区 · 6 年前

我在试图创造一个问题来扭转弹起将事件转化为可观察的流。

我在看第六版的NG书。我陷入了一个在你输入时搜索YouTube视频的例子中。当搜索返回时,我们将显示视频缩略图结果列表,以及每个视频的描述和链接。

因此,我们使用一个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

在RXJS5中,它提供了一种使用rx.observable.fromEvent监听元素上事件的方法。

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

但我得到了这个错误:

src/app/search box/search box.component.ts(42,13)中出错:错误 TS2339:类型“typeof”上不存在属性“fromEvent” 可观察。

i rxjs 6 Observable和FromEvent的导入如下:

import { Observable, fromEvent } from 'rxjs';

这是我在Angular6中为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
            )

但我有一个错误:

属性“map”在类型observable<>上不存在

在命令行中,运行ng-serve之后:

搜索框/搜索框中出错。component.ts(40,4):错误TS1135:需要参数>表达式。 search box/search box.component.ts(54,4):错误TS1128:需要声明或>语句。

但是,它不起作用… 那么,我该怎么写我的烟斗呢?

我的研究进展如何:

NG手册中的文件已过时。
文件来自 angular guide 是不同的。
我打开一个 Issue on GitHub, 但他们把我送回这里

2 回复 | 直到 6 年前

GeoAstronaute 6 年前

这在您的情况下应该有效:

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的一个工作演示: Demo Angular 6 + Rxjs 6

Philipp Ludwig 6 年前

在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 migration guide .