web-dev-qa-db-fra.com

Les résultats de cast depuis Observable.forkJoin vers leurs types respectifs dans Angular 2

Disons que j'ai un composant dans Angular 2 qui doit charger 2 choses différentes à partir du serveur avant que la page ne soit affichée. J'aimerais que toutes ces choses se déclenchent et appellent un gestionnaire d'événements quand ils reviennent en disant que la page est isLoaded = true. Disons que j'ai une classe de service qui ressemble à ceci.

export class MyService {
   getStronglyTypedData1(): Observable<StrongData1[]>{
      return this.http.get('http://...').map((response:Response) => <StrongData1[]>response.json());
   }
   getStronglyTypedData2(): Observable<StrongData2[]>{
         return this.http.get('http://...').map((response:Response) => <StrongData2[]>response.json());
   }
}

Ensuite, j'ai un composant qui utilise cette classe de service comme ceci.

export class MyComponent implements OnInit {
   isLoaded = false;
   stronglyTypedData1: StrongData1[];
   stronglyTypedData2: StrongData2[];

   constructor(private myService:MyService){ }

   ngOnInit(){
      var requests [ 
         this.myService.getStronglyTypedData1(),
         this.myService.getStronglyTypedData2()
      ];
      Observable.forkJoin(requests).subscribe(
         results => {
            this.stronglyTypedData1 = results[0];
            this.stronglyTypedData2 = results[1];
            this.isLoaded = true;
         });
   }
}

Le compilateur TypeScript se plaint de ne pas pouvoir convertir l'objet type en type StrongData1 []. Si je change StrongData1 et StrongData2 en "any", tout fonctionne bien. Je préfère ne pas le faire car je perds l'avantage des typages forts de TypeScript.

Comment convertir les résultats de forkJoin en leurs types respectifs?

13
Chris Lees

pour moi, cela fonctionne toujours lorsque j'ajoute les demandes directement à Observable.forkJoin et que j'utilise ensuite la destruction es6 pour le tableau de résultats.

de sorte que votre code puisse ressembler à ceci

Observable
    .forkJoin(this.myService.getStronglyTypedData1(), this.myService.getStronglyTypedData2())
    .subscribe(
        ([typeData1, typeData2]) => {
            this.stronglyTypedData1 = typeData1;
            this.stronglyTypedData2 = typeData2;
            this.isLoaded = true;
        }
    );
20
Nicolas Gehlert

essayer

(results:[StrongData1[], StrongData2[]]) =>
3
kit