Невозможно подписаться на rxjs-ответ во время получения по вызову id

Question

Я следую учебнику angular2, и я пытаюсь назвать свой настоящий REST api без моделирования веб-API. Когда я пытаюсь получить один Tune по 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> 

Когда я пытаюсь отлаживать настроиться detail.component.ts я могу видеть т объект правильно заполнен элементом данных сервера, но я не могу показать this.tune в отстройки detail.component.html

Что не так?

ОБНОВЛЕНИЕ: Правильно!

Я нашел проблема на стороне сервера в ответ JSon

это ответ Whe я пытаюсь получить по идентификатору

[{"_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"}] 

проблема связана с внешними кронштейнами. Я изменил API-интерфейс REST, чтобы ответить без [], и теперь он работает как шарм!

Answer 1

Похоже, вам необходимо использовать трубу async, поскольку вы заселяете tune асинхронно тщательно наблюдаемым.

Else, попробуйте выполнить настройку в своем HTML, написав следующее: Tune: {{tune | json}} Должна ли печатать значение JSON