此属性 fromEvent 在类型 'typeof Observable' Angular 6 上不存在 [英] 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:https://github.com/NiLinli/ng-book2-angular-6-r68-code-samples/blob/master/http/src/app/you-tube-search/search-box.component.ts

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)​​ 中的错误:错误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 serve 后:

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?

我的研究进展如何:

1. Ng-book 中的文档已过时.
2. 角度指南 中的文档有所不同.
3. 我在 GitHub 上打开了一个问题，但他们给我发回了在这里

1. The documentation from the Ng-book is outdated.
2. The documentation from the angular guide is different.
3. 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 + Rxjs6

EDIT Here is a working demo on Stackblitz: Demo Angular 6 + Rxjs 6

这篇关于此属性 fromEvent 在类型 'typeof Observable' Angular 6 上不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！