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

【问题标题】：Using *ngFor with a JSON object in Angular 2在 Angular 2 中使用 *ngFor 和 JSON 对象
【发布时间】：2016-12-29 13:40:03
【问题描述】：

我正在尝试实现一个解耦的 wordpress 解决方案，但在我的模板中显示 JSON 对象属性时有些困惑。我能够为 WP API 返回 JSON 对象，但不确定如何处理它们。我可以获得一个属性以在模板中显示它的值的唯一方法是，如果我将 [0] 添加到插值属性，这在 ngFor 循环中不起作用。我在这里阅读了@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 很陌生，可以在这个问题上使用一些指导。谢谢！！

基于 cmets 的更新，如果我想转换像 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
    ],
  }
]

【问题讨论】：

NgFor 仍然只适用于数组。在 plunkr 代码中，英雄是一个数组 heroes: Hero[];。
你想从你的 json 中渲染什么？一切？
好吧，ID、标题和内容是肯定的。这些是 Wordpress 博客文章，所以我正在尝试构建一个文章页面和一个单独的文章页面。

标签： json wordpress api angular

【解决方案1】：

只需将{{hero.name}} 替换为{{hero.data.name}}

处理JSON对象的最佳方式是创建一个接口类来轻松访问数据

【讨论】：

【解决方案2】：

非常感谢您的回答。他们帮助我找到了解决方案。我能够通过创建一个帖子数组并使其等于 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>

【讨论】：

【解决方案3】：

您如何定义您的服务？

这是一个例子：

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 的数组 []

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

希望对您有所帮助。

【讨论】：

【解决方案4】：

如果不为您编写所有代码，您所问的问题就没有简短的答案，但这里有一些提示：

您必须获取返回的 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 映射器 - http://cloudmark.github.io/Json-Mapping/

【讨论】：