jsonから不明なサイズの配列にデータをバインドする

Question

jsonからモデルにデータをバインドしようとしましたが、それを把握することはできません。 [object object]、[object object]、[object object]が表示されます。

import { Injectable } from '@angular/core'; 
import {Author} from "./author"; 
import {Comment} from "./comment"; 

@Injectable() 
export class Post { 
id:number; 
author:Author; 
subscribed:boolean; 
created:string; 
active:boolean; 
text:string; 
comments:Comment[]; 

constructor(id:number, author:Author, subscribed:boolean, created:string, active:boolean, text:string, comments:Comment[]) { 
    this.id = id; 
    this.author = author; 
    this.subscribed = subscribed; 
    this.created = created; 
    this.active = active; 
    this.text = text; 
    this.comments = comments; 
} 


public static getPosts():Post{ 
    return new Post(0, null, null, "", null, "",null); 
} 

} 

comment.ts

家： は{{post.comments.text}}は何も示していない。..

JSON

{ 
"id": "507033622", 
"author": { 
    "user": 2, 
    "name": "test", 
    "avatar": null, 
    "bio": "", 
    "banned": false 
}, 
"subscribed": true, 
"created": "2017-06-21T19:45:46.289429Z", 
"active": true, 
"text": "Lolololol", 
"comments": [ 
    { 
     "id": 1, 
     "author": { 
      "user": 1, 
      "name": "wyldbot", 
      "avatar": null, 
      "bio": "", 
      "banned": false 
     }, 
     "created": "2017-06-24T14:06:28.861325Z", 
     "text": "Comment" 
    }, 
    { 
     "id": 2, 
     "author": { 
      "user": 1, 
      "name": "wyldbot", 
      "avatar": null, 
      "bio": "", 
      "banned": false 
     }, 
     "created": "2017-06-24T14:30:43.382514Z", 
     "text": "More data" 
    }, 
    { 
     "id": 3, 
     "author": { 
      "user": 1, 
      "name": "wyldbot", 
      "avatar": null, 
      "bio": "", 
      "banned": false 
     }, 
     "created": "2017-06-24T14:30:53.115687Z", 
     "text": "More data" 
    } 
] 
} 

post.tsをしようとしています。 component.html

<h3>Post ID: {{post.id}}</h3> 
<p>Post Owner ID: {{post.author.user}}</p> 
<p>Post Owner Name: {{post.author.name}}</p> 
<p>Post Owner Avatar: {{post.author.avatar}}</p> 
<p>Post Owner Bio: {{post.author.bio}}</p> 
<p>Is Post Owner Banned: {{post.author.banned}}</p> 
<p>Subscribed: {{post.subscribed}}</p> 
<p>Created: {{post.created}}</p> 
<p>Active: {{post.active}}</p> 
<p>Text: {{post.text}}</p> 
<p>Comments: {{post.comments}}</p> 

Answer 1

post.commentsは配列なので、*ngForディレクティブを使用してループします。

<div *ngFor="let comment of post.comments"> 
    <div>Text: {{ comment.text }}</div> 
</div> 

私はこのplnkrであなたのJSONのデータにアクセスする他の例をカバーしています。

<div *ngFor="let comment of post.comments"> 
    <p>Comment: {{ comment | json}}</p> 
    <p>Author: {{ comment.author | json}}</p> 
    <p>Author Name: {{ comment.author.name }}</p> 
    <p>Text: {{ comment.text }}</p> 
</div>