首页 文章

在Angular 2中使用* ngFor和JSON对象

提问于
浏览
0

我'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 回答

  • 0

    如果没有为您编写所有代码,您的要求就没有简短的答案,但这里有一些提示:

  • 0

    你是如何定义服务的?

    这是一个例子:

    export interface IPost {
      id: number;
      date: Date;
      date_gmt: Date;
      ... // rest of your defintion
    }
    
    @Injectable()
    export class BlogPostService {
        private http: Http;
    
        constructor(http: Http) {
            this.http = http;
        }
    
        private apiUrl: string = 'api/blog/posts.json';
    
        getPosts(): Observable<IPost[]> {
            return (this.http.get(this.apiUrl)
                .map((response: Response) => <IPost[]>response.json())
                .do(data => console.log('All: ' + JSON.stringify(data)))
                .catch(this.handleError)) as any;
        }
    
        private handleError(error: Response) {
            console.error(error);
            return Observable.throw(error.json().error || "Server error");
        }
    }
    

    这一行应该将你的json对象转换为IPosts的array []

    .map((response: Response) => <IPost[]>response.json())
    

    希望有所帮助 .

  • 0

    非常感谢你的答案 . 他们帮助我找到了解决方案 . 我能够通过创建一个posts数组并使其等于Observable返回来解决这个问题 . 该组件如下所示:

    posts: {};
    
    constructor (private _wpService: WpApiService) {}
    
    ngOnInit() { this.getPosts() }
    
    getPosts() {
    
        this._wpService.getPosts()
            .subscribe(
              data => {
                this.posts = data;
            });
      }
    

    模板看起来像:

    <li *ngFor="let post of posts">
         <h3>{{post.title.rendered}}</h3>
    </li>
    

相关问题