Observableのプロパティが空です

Question

私はヒーローズのチュートリアルのほとんどを練習し、ヒーローの位置を地図に表示するヒーロートラッカーを追加することに決めました。

これは値が定数でモックアップされたときに機能しましたが、現在は休憩サービスを呼び出していてLocationプロパティは空です。私はこれを貧弱な形で書いておき、構文について助けてもらえると確信しています。ここで

は、ヒーロー・マップ・コンポーネントです：

import 'rxjs/add/operator/switchMap'; 
import { Observable } from 'rxjs/Observable'; 
import { Component, OnInit, NgZone } from '@angular/core'; 
import { ActivatedRoute, Router, ParamMap } from '@angular/router'; 

import { Hero, HeroService } from '../heroes/hero.service'; 
import { HeroLocationService } from './hero-location.service'; 
import { HeroLocation } from './hero-location'; 

@Component({ 
    template: ` 
    <style> 
     agm-map { 
      height: 300px; 
      width: 400px; 
     } 
    </style> 
    <h2>HERO MAP</h2> 
     <div *ngIf="hero$ | async as hero"> 
     <h3>{{ hero.HeroName }}'s location is {{ hero.Location }}</h3> 
      <div *ngIf="loc$ | async as loc"> 
       <h4>Latitude: {{ loc.lat() }} Longitude: {{ loc.lng() }}</h4> 
       <agm-map [latitude]="loc.lat()" [longitude]="loc.lng()"> 
        <agm-marker [latitude]="loc.lat()" [longitude]="loc.lng()"></agm-marker> 
       </agm-map> 
      </div> 
     <p> 
      <button (click)="gotoHeroes(hero)">Back</button> 
     </p> 
     </div> 
    ` 
}) 
export class HeroMapComponent implements OnInit { 
    hero$: Observable<Hero>; 
    loc$: Observable<any>; 

    constructor(
    private service: HeroService, 
    private router: Router, 
    private route: ActivatedRoute, 
    private locationservice: HeroLocationService 
) {} 

    ngOnInit() { 

     var hloc: string; 

     //the problem is here ////////////////////////////////////// 
     this.hero$ = this.route.paramMap 
      .switchMap((params: ParamMap) =>    
       this.service.getHero(params.get('id'))); 

     this.hero$.subscribe(function (z) { 
      hloc = z.Location.toString(); 
     }); 
     //////////////////////////////////////////////// 

     this.loc$ = this.locationservice.getGeocoding(hloc); 
    } 

    gotoHeroes(hero: Hero) { 
     let heroId = hero ? hero.Id : null; 

     // Pass along the hero id if available 
     // so that the HeroList component can select that hero. 
     // Include a junk 'foo' property for fun. 

     this.router.navigate(['/hero-tracker', { id: heroId, foo: 'foo' }]); 
    } 
} 

私は、データが正常に返されていることをChromeのネットワークタブで見ることができます：

{"Id":11,"HeroName":"Batman","Location":"Chicago, Illinois"} 

hero.serviceは次のようになります。

import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/map'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 

import { HttpClient } from '@angular/common/http'; 

export class Hero { 
    constructor(public Id: number, public HeroName: string, public Location: string) { } 
} 

@Injectable() 
export class HeroService { 

    constructor(private http: HttpClient) { } 

    getHeroes(): Observable<Hero[]> { 
     return this.http.get<Hero[]>('http://localhost:50125/api/heroes') 
      .catch(error => Observable.throw(error)); 
    } 

    getHero(id: number | string): Observable<Hero> { 
     return this.http.get<Hero>('http://localhost:50125/api/heroes/' + id) 
      .catch(error => Observable.throw(error)); 
    } 

} 

Answer 1

実際にサーバーから戻ってくる前に、場所を使用しようとしていると思います。

はこれを試してみてください。

 this.hero$.subscribe(z => { 
      hloc = z.Location.toString(); 
      this.loc$ = this.locationservice.getGeocoding(hloc); 
     }); 

HLOCはコールバックに設定されているが、非同期操作であるサブスクライブの外で使用されています。 hlocが設定されている場合にのみこれを使用することにより、返されるサーバと同じ値を持つようにすることができます。