web-dev-qa-db-ja.com

Angular2 Observable.forkオブザーバブル変数の結合-ReferenceError：Observableは定義されていません

助けを求めたいです。重要ではないと思われるコードは省略しました。サービス呼び出しを含むTSファイルを想像してみましょう。

//ファイル：someService.ts

@Injectable()
export class SomeService {
     method1(){
         var observable = this.http.get(someUrl)
                          .map((res: Response) =><MyClass[]>res.json());
         return observable;
     }

     method2(){
         // Similar to method1
     }
}

//ファイル：someComponent.ts

This.method1observableとmethod2observableは親（ルート）コンポーネントから適切に割り当てられ、そのタイプはObservableであることに注意してください。

import {Observable}     from 'rxjs/Observable';

export class SomeClass {
    public m1: Observable<MyClass[]>;
    public m2: Observable<AnotherClass[]>

    ngOnInit() {
        Observable.forkJoin(this.m1,this.m2) //<- ERROR HERE
        .subscribe(data => {
            this.myFunction(data[0], data[1]);
            requestAnimationFrame(this.renderLoop);
        });
    }
}

"Uncaught ReferenceError：Observable is not defined"と表示されます。何が間違っているのかわかりませんか？ Observable.forkJoinがサービス内で呼び出される例をいくつか見ました。しかし、コンポーネント内で呼び出したい場合はどうすればよいですか？

typescriptangularsystem.reactive
17
Tomino

この方法でインポートを試みることができます：

import {Observable} from 'rxjs/Rx';

の代わりに：

import {Observable} from 'rxjs/Observable';

また、forkJoinメソッドにオブザーバブルを提供するために配列を使用する必要があります。

ngOnInit() {
        Observable.forkJoin([this.m1,this.m2])
        .subscribe(data => {
            this.myFunction(data[0], data[1]);
            requestAnimationFrame(this.renderLoop);
        });
    }

@Componentで入力を指定することを忘れないでください：

@Component({
    inputs: ['m1', 'm2']
})
31
Thierry Templier

Rxjsライブラリーは非常に大きいため、インポートしないでください。アプリに次のインポートanywhereがある場合、rxjs全体をインポートすることになりますので、注意してください：

import {Observable} from 'rxjs';

または

import {Observable} from 'rxjs/Rx';

代わりに、使用する個々の機能をインポートできます。例：

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/forkJoin';

UPDATE：rxjs 5.5以降では、 演算子をインポートする推奨方法は ：

import { range } from 'rxjs/observable/range';
import { map, filter, scan } from 'rxjs/operators';

const source$ = range(0, 10);

source$.pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
)
.subscribe(x => console.log(x))
5
Rui Marques

forkjoin（）メソッドを使用して複数の並行http.get（）リクエストを実行する方法の詳細については、このリンクを参照できます。ここで、完全な作業例を取得できます。

http://www.metaltoad.com/blog/angular-2-http-observables

3
Shailesh kala