get idコール中にrxjsレスポンスを購読できません

Question

私はangular2チュートリアルに従っており、Web APIをシミュレートせずに実際のREST APIを呼び出そうとしています。 私はIDで1つのTuneを取得しようとすると、オブジェクトを購読できず、ビューに表示できません。コード以下：

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"}] 

によって取得しようWHE応答である。ました私は[]なしで応答するためにREST APIを変更しましたが、今は魅力的です！

Answer 1

tuneにオブザーバブルを非同期で入力しているので、asyncパイプを使用する必要があるようです。

それ以外の場合は、次のようにHTMLを調整して出力してみてください。 チューン：{{チューン| json}} JSONの値をきれいに印刷する必要があります