我在尝试创建以将 keyup 事件转换为可观察流时遇到问题 .
我正在关注Ng-book版本6.我遇到了一个在您输入时搜索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
在RxJS 5中,它提供了一种使用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 Observable'上不存在属性'fromEvent' .
我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()
This is my try with RxJs 6 and 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 {<>}上不存在
在命令行中,运行后服务:
搜索框/ search-box.component.ts中的错误(40,4):错误TS1135:预期的参数>表达式 . search-box / search-box.component.ts(54,4):错误TS1128:声明或>语句预期 .
但是,它不起作用...... So, how should I write my pipe sintax?
我的研究如何进行:
-
Ng-book中的文档已过时 .
-
angular guide的文档不同 .
-
我打开Issue on GitHub,但是他们把我送回了这里
2 回答
这适用于您的情况:
希望能帮助到你 !
EDIT 这是关于Stackblitz的工作演示:Demo Angular 6 + Rxjs 6
在RxJS 5中,你在写作
RxJS 6的进口变化
有关更多信息,请查看RxJS migration guide .