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' }]); 
    } 
} 

내가 크롬의 네트워크 탭에서 볼 수

:

:

{"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이 설정된 경우에만이를 사용하여 반환 된 서버와 동일한 값을 갖도록 할 수 있습니다.