Я следую учебнику angular2, и я пытаюсь назвать свой настоящий REST api без моделирования веб-API. Когда я пытаюсь получить один Tune по id, я не могу подписаться на объект, а затем показать его в представлении. Ниже код:Невозможно подписаться на rxjs-ответ во время получения по вызову 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, чтобы ответить без [], и теперь он работает как шарм!
Почему вы смешиваете наблюдаемые и обещания? Stick с наблюдаемыми и ваш код будет намного проще. – AngularChef
У вас есть конфликт между '@Input() tune' и' this.tune = t'. Обе части кода пытаются установить одно и то же свойство 'tune'. Это либо одно, либо другое. – AngularChef
AngularFrance, я нашел проблему. Это была серверная сторона. Json был массивом, даже когда я пытаюсь получить Id. Поэтому я могу решить изменить this.tune = t [0] или на стороне сервера. – adev