web-dev-qa-db-ja.com

このプロパティfromEventは、 'typeof Observable'タイプに存在しませんAngular 6

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'が存在しません。

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
            )

しかし、私はこのエラーがあります：

プロパティ 'map'はObservable型に存在しません{<>}

コマンドラインで、ng serveを実行した後：

Search-box/search-box.component.ts（40,4）のエラー：エラーTS1135：引数>式が必要です。 search-box/search-box.component.ts（54,4）：エラーTS1128：宣言または>ステートメントが必要です。

しかし、それは機能していません...だから、どのようにパイプシンタックスを書くべきですか？

私の研究はどのように進んでいますか：

  1. Ng-bookのドキュメントは古くなっています。
  2. angular guide のドキュメントは異なります。
  3. GitHubの問題 を開きますが、ここに返送されます
angularrxjsobservable
25
ValRob

これはあなたのケースで動作するはずです：

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
        )

それが役に立てば幸い ！

EDITここにStackblitzのデモがあります： Demo Angular 6 + Rxjs 6

30
GeoAstronaute

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移行ガイド をご覧ください。

10
MatthiasSommer