角度2ネストされたプロパティは、オブジェクトによって検出されていません - 活字体

Question

私は、サーバーからデータを取得し、サーバーがJSONはただ好きな文字列を返すコンポーネントがあります。

"{ 
    "name": "John Doe", 
    "age": "5", 
    "addresses": [ 
    {"street": "123 Street", "city": "Main City"} 
    ] 
}" 

だから私は私のコンポーネントでこれを受信したときに私は：

let result = JSON.parse(response); //response is the JSON string from server 

私はすべてのアドレスを表示する必要があるので、私はそれを表示するためにngForを使用しています。問題はアドレスが表示されないことです。そして、アドレスの長さだけを表示すると、ゼロを表示します。

console.log(result['addresses']) or console.log(result.addresses); 

をそれは奇妙であるコンテンツが表示されます。だから私は、コンソール上で、それはまた、アドレスのためのコンテンツを表示しませんが、私は実行してちょうどアドレスを印刷する場合、オブジェクト全体を印刷しようとしました。だから誰かが私を助けることを願っ

Answer 1

引用符を使用して文字列にオブジェクトの文字列表記を配置するときは、引用符をエスケープする必要があります。アポストロフィを文字列区切り文字として使用します。

'{ 
"name": "John Doe", 
"age": "5", 
"addresses": [ 
    {"street": "123 Street", "city": "Main City"} 
] 
}' 

これは動作するはずです。

Answer 2

だから、問題はどのようにアドレスにアクセスしようとしているかにあります。あなたのアドレスは配列オブジェクトです。したがって、それを表示するには*ngForを使用します。コンポーネントテンプレートは次のようになります。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     Name:{{data.name}}<br> 
     <label *ngFor="let a of data.addresses"> 
     Street:{{a.street}} 
     City:{{a.city}} 
     </label> 
    </div> 
    `, 
}) 

あなたは行き​​たいです。ここにはPlunker Demoがあります。

ここにはconsole.log(result.addresses)とconsole.log(result)の結果があります.Plunkerでも同じことを確認できます。以下は同じ

のスナップは、それが役に立てば幸いれる:)