javascript - Angular 2 Array skrivs ut på konsolen men kan inte skriva ut objektets egenskap på skärmen

Jag har följande metod i en tjänst som jag har skapat:

  getPost(nid: string): Observable<Post[]>{
    let url = "http://test.co.uk/api/v1/basic/" + nid;
    return this.http.get(url,  {headers: this.headers}).map(res => res.json() as Post).catch(err => {

      return Observable.throw(err);
    });
  }

Och detta är klassen för min komponent:

export class PostDetailComponent implements OnInit {
  posts: Post[] = [];
  post: Post = new Post();
  constructor(
private route: ActivatedRoute,
private postService: PostService
) { }
  ngOnInit() {

    this.route.params.switchMap((params: Params) => {
      let nid = params ['nid'];
      return this.postService.getPost(nid);  }).subscribe(res => {
      console.log(res)
      this.post = res as Post;
    }, err =>{
      console.log(err);
  });

  }

}

JSON-flödet ser ut så här (ja, ett objekt i arrayen):

  [  
   {  
      "nid":"3",
      "title":"When Unity meets Vuforia",
      "body":"<p>Unless you have been living under a rock in the past 7 - ...",
      "uid":"admin",
      "path":"\/node\/3",
      "field_article_image":"http:\/\/test.co.uk\/sites\/default\/files\/when-unity-meets-vuforia_0.jpg?itok=BGYaotay"
   }
]

Så i min mall, om jag skriver ut {{post}} får jag [object Object] på skärmen.

Om jag skriver ut {{post | json}} får jag radens JSON-flöde.

Och slutligen, om jag skriver ut {{post.title}} eller {{post?.title}} får jag ingenting.

Jag har också en klass Post som ser ut så här:

export class Post{
  constructor(

public nid?: string,
public title?: string,
public body?: string
public image?: string
  ){
  }
}

Några tips?

Svar #1

Du tilldelar en array till vad som borde vara ett enda objekt. Kopiera det första elementet i arrayen till postvariabeln

this.post = res[0] as Post

Sidnot: Det är fel att tilldela ett rått objekt till en klassinstans. I detta fall kommer din this.post.constructor inte att existera och this.post instanceof Post == false.

Du kan göra Object.assign(this.post, res[0]), men du kan behöva rensa befintliga egenskaper om inte alla egenskaper alltid är närvarande.

Jag föredrar att definiera objektsformer som gränssnitt istället, då skulle du inte ha det problemet eftersom all gränssnittsinformation tas bort vid körning, medan en klass genererar viss kod istället för att bara göra statiska typkontroller vid kompileringstid