Question

我正在关注angular2教程，我试图在不模拟Web API的情况下调用我真正的REST api。当我尝试通过id获得单个Tune时，我无法订阅该对象，然后在视图中显示它。代码下方：

hero.service摘录：

$(document).on('click', '#mainDataTable tr', function() { console....

调detail.ts

CFRelease()

调detail.component.ts

  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.component.html

 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;;
}

当我尝试调试tune-detail.component.ts时，我可以看到t对象正确填充了服务器数据项但我无法在tune-detail.component.html中显示this.tune

有什么问题？

更新：这是正确的！

我发现问题是json响应中的服务器端

这是我尝试通过id

获得的回复

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();
  }
}

问题是由于外部支架造成的。我改变了REST get API，以便在没有[]的情况下做出响应，现在它就像一个魅力！

Answer 1

在您通过observable异步填充async时，似乎需要使用tune管道。

否则，请尝试通过编写以下内容在HTML中输出tune：调：{{tune | JSON}} 它应该打印JSON值

在get by id调用期间无法订阅rxjs响应

1 个答案: