web-dev-qa-db-fra.com

Angular2 Observable.forkJoin de variables observables - ReferenceError: Observable n'est pas défini

Je voudrais vous demander de l'aide. J'ai omis du code qui, je suppose, n'est pas important. Imaginons un fichier TS contenant des appels de service:

// fichier: 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
     }
}

// fichier: someComponent.ts

Veuillez noter que this.method1observable et method2observable sont correctement attribués à partir du composant parent (racine) et que leur type est 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);
        });
    }
}

J'obtiens "Uncaught ReferenceError: Observable n'est pas défini". Tu ne sais pas ce que je fais mal? J'ai vu quelques exemples où Observable.forkJoin est appelé dans un service. Mais que faire si je veux l'appeler à l'intérieur d'un composant?

typescriptangularsystem.reactive
17
Tomino

Vous pouvez essayer d'importer de cette façon:

import {Observable} from 'rxjs/Rx';

au lieu de:

import {Observable} from 'rxjs/Observable';

Vous devez également utiliser un tableau pour fournir vos observables à la méthode forkJoin:

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

Et n'oubliez pas de spécifier des entrées dans @Component:

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

Vous devez éviter d'importer toute la bibliothèque rxjs car elle est assez grande. Si vous avez les importations suivantes n'importe où dans votre application, vous importerez l'intégralité des rxjs, alors gardez cela à l'esprit:

import {Observable} from 'rxjs';

ou

import {Observable} from 'rxjs/Rx';

Vous pouvez à la place importer les fonctionnalités individuelles que vous utiliserez, par exemple:

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

MISE À JOUR: À partir de rxjs 5.5, la méthode recommandée pour importer des opérateurs est :

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

vous pouvez vous référer à ce lien pour plus d'informations sur l'utilisation de la méthode forkjoin () pour exécuter plusieurs requêtes http.get () simultanées. Ici, vous pouvez obtenir un exemple de travail complet.

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

3
Shailesh kala