我'm trying to implement a decoupled wordpress solution and I'm在我的模板中显示JSON对象属性时有点混乱 . 我在模板中的值是'm able to return JSON objects for the WP API but not sure how to handle them. The only way I can get a property to display it',如果我向插值属性添加[0],它赢得't work in an ngFor loop. I' @读取@Thierry这里的解决方案access key and value of object using *ngFor但这似乎不是谷歌处理英雄之旅的应用程序http://plnkr.co/edit/WkY2YE54ShYZfzJLSkMX?p=preview
Google使用此数据集:
{
"data": [
{ "id": "1", "name": "Windstorm" },
{ "id": "2", "name": "Bombasto" },
{ "id": "3", "name": "Magneta" },
{ "id": "4", "name": "Tornado" }
]
}
对我来说它看起来像一个JSON对象,那么应用程序如何能够处理这样的事情:
<ul>
<li *ngFor="let hero of heroes">
{{hero.name}}
</li>
</ul>
我不清楚RC5是否允许在对象上进行迭代,或者我是否还需要以某种方式对其进行转换 . 我对Angular很新,可以在这个问题上使用一些指导 . 谢谢!!
基于评论的更新,如果我想转换像http://localhost:8888/wp-json/wp/v2/posts这样的api请求,那么最好的方法是什么?我的返回代码看起来像:
[
{
"id": 4,
"date": "2016-08-09T00:09:55",
"date_gmt": "2016-08-09T00:09:55",
"guid": {
"rendered": “http://localhost:8888/?p=4"
},
"modified": "2016-08-09T00:11:05",
"modified_gmt": "2016-08-09T00:11:05",
"slug": “wp-api-test”,
"type": "post",
"link": "http://localhost:8888/2016/08/wp-api-test”,
"title": {
"rendered": "testing the wp api"
},
"content": {
"rendered": "<p>loreum ipsum</p>\n"
},
"excerpt": {
"rendered": "<p>loreum ipsum</p>\n"
},
"author": 1,
"featured_media": 0,
"comment_status": "open",
"ping_status": "open",
"sticky": false,
"format": "standard",
"categories": [
1
],
}
]
3 回答
如果没有为您编写所有代码,您的要求就没有简短的答案,但这里有一些提示:
您必须获取正在返回的JSON响应并在TypeScript中创建接口或类,因此当您执行POST时,Angular 2可以使用JSON并使用您的类将其转换为对象 .
JSON到TS生成器:http://json2ts.com/
Ninja Tips 2 - 使用TypeScript键入您的JSON - http://blog.ninja-squad.com/2016/03/15/ninja-tips-2-type-your-json-with-typescript/
TypeScript Json Mapper - http://cloudmark.github.io/Json-Mapping/
你是如何定义服务的?
这是一个例子:
这一行应该将你的json对象转换为IPosts的array []
希望有所帮助 .
非常感谢你的答案 . 他们帮助我找到了解决方案 . 我能够通过创建一个posts数组并使其等于Observable返回来解决这个问题 . 该组件如下所示:
模板看起来像: