类型'typeof Observable'Angular 6上不存在fromEvent的此属性 [英] This property fromEvent does not exist on type 'typeof Observable' Angular 6
问题描述
我在尝试创建将 keyup 事件转换为可观察的流时遇到问题.
I am having a problem trying to create to turn the keyup events into an observable stream.
我正在使用Ng-book版本6. 我被困在一个示例中,该示例会在您键入内容时搜索YouTube视频.搜索返回时,我们将显示视频缩略图结果列表,以及说明和每个视频的链接.
I am following the Ng-book version 6. I am stuck in an example that makes a search YouTube video as you type. When the search returns we’ll show a list of video thumbnail results, along with a description and link to each video.
为此,我们使用了一个observable.fromEvent:
So for this, we use an 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
在RxJS 5中,它提供了一种使用Rx.Observable.fromEvent侦听元素上的事件的方法.
In RxJS 5, it provides a way to listen to events on an element using 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)中的ERROR:错误 TS2339:类型"typeof"上不存在属性"fromEvent" 可观察的".
ERROR in src/app/search-box/search-box.component.ts(42,13): error TS2339: Property 'fromEvent' does not exist on type 'typeof Observable'.
RxJS 6中Observable和fromEvent的导入是这样的:
I RxJS 6 the import for Observable and fromEvent is like this:
import { Observable, fromEvent } from 'rxjs';
这是我在Angular 6中的RxJs5版本的代码:(不起作用)
This is my code for the RxJs5 version in Angular 6: (it doesnt work)
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的尝试(根据最后一个答案进行了更新)
This is my try with RxJs 6 and angular 6 (it's updated according with the last answer)
我正在尝试使用管道语法:
I am trying to use the 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
)
但是我有这个错误:
Observable类型的属性地图"不存在{<>}
Property 'map' doesnt exist on type Observable{<>}
在命令行中,运行ng后,服务:
And in the command line, after run ng serve:
search-box/search-box.component.ts(40,4)中的错误:错误TS1135:参数>期望的表达式. search-box/search-box.component.ts(54,4):错误TS1128:需要声明或>语句.
ERROR in search-box/search-box.component.ts(40,4): error TS1135: Argument > expression expected. search-box/search-box.component.ts(54,4): error TS1128: Declaration or > statement expected.
但是,它不起作用... 那么,我该如何写管道罪税?
But, it is not working... So, how should I write my pipe sintax?
我的研究进展如何
- The documentation from the Ng-book is outdated.
- The documentation from the angular guide is different.
- I open an Issue on GitHub, but they send me back here
推荐答案
此方法适用于您的情况:
This should work in your case :
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
EDIT Here is a working demo on Stackblitz: Demo Angular 6 + Rxjs 6
这篇关于类型'typeof Observable'Angular 6上不存在fromEvent的此属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!