호출 ID 호출 중에 rxjs 응답을 구독 할 수 없습니다.

Question

angular2 자습서를 따르고 있으며 웹 API를 시뮬레이트하지 않고 실제 REST API를 호출하려고합니다. ID로 단일 조정을 얻으려고하면 개체를 구독하지 못하고보기에 표시 할 수 없습니다.

hero.service 발췌 :

getTune(id: string): Promise<TuneDetail> { 
    const url = `${this.tunesUrl}/${id}`; 
    return this.http.get(url) 
    .toPromise() 
    .then(response => response.json() as TuneDetail) 
    .catch(this.handleError); 
    } 

조정-detail.ts

export class TuneDetail { 
    _id: string; 
    tuneTitle: string; 
    tuneAuthorName: string; 
    grilleAuthorName: string; 
    comments: string; 
    timestamp: string; 
    votes: number; 
    grille_intro:string[]; 
    grille_outro:string[]; 
    grille:string[]; 
    userId: string; 
    avatarSvg:string;; 
} 

조정-detail.component.ts

import { Component, OnInit,Input } from '@angular/core'; 
import { TuneDetail } from '../tune_detail'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { Location }     from '@angular/common'; 

import { HeroService } from '../hero.service'; 

@Component({ 
    selector: 'app-tune-detail', 
    templateUrl: './tune-detail.component.html', 
    styleUrls: ['./tune-detail.component.css'] 
}) 
export class TuneDetailComponent implements OnInit { 
    @Input() 
    tune: TuneDetail; 
    constructor(
    private heroService: HeroService, 
    private route: ActivatedRoute, 
    private location: Location 
) { } 

    ngOnInit() { 

    this.route.params 
    .switchMap((params: Params) => this.heroService.getTune(params['id'])) 
    .subscribe(t => this.tune = t); //At debug time I can see t object filled with all data. 
    } 


    goBack(): void { 
    this.location.back(); 
    } 
} 

조정 - 세부 코드 아래에. component.html

<button (click)="goBack()">Back</button> 
<div *ngIf="tune"> 
<h2>{{tune.tuneTitle}} details!</h2> 
<div><label>id: </label>{{tune.grilleAuthorName}}</div> 
<div> 
    <label>name: </label> 
    <input [(ngModel)]="tune.tuneTitle" placeholder="name"/> 
</div> 
</div> 

tune-detail.component.ts를 디버그하려고하면 t 개체가 서버 데이터 항목으로 올바르게 채워지지만 tune-detail.component.html에 this.tune을 표시 할 수 없습니다.

무엇이 잘못 되었나요?

업데이트 : 맞습니다!

나는 문제가 JSON 응답

내가 ID

[{"_id":"5894f196f307de607c000018","avatarSvg":"images/svg/violin.svg","votes":1,"tuneAuthorName":"Turner Layton","tuneTitle":"After you've gone","grilleAuthorName":"test","userId":"320004","__v":1,"grille":[[{"cellValue":"C6","cellId":"00"},{"cellValue":"%","cellId":"01"},{"cellValue":"C-6","cellId":"02"},{"cellValue":"G13/Ab","cellId":"47"}]],"grille_outro":[],"grille_intro":[],"timestamp":"2017-02-03T21:10:17.281Z"}] 

문제가 외부 브라켓에 기인하여 얻을려고 갔지이는 반응이다에서 서버 쪽 발견했다. []없이 응답하기 위해 REST API를 변경했습니다. 이제는 매력처럼 작동합니다!

Answer 1

tune을 관찰 할 때 비동기 적으로 채우는 것처럼 async 파이프를 사용해야하는 것처럼 보입니다.

아니면 HTML을 다음과 같이 작성하여 출력하십시오. Tune : {{tune | json}} JSON 값을 출력해야합니다.