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

Posted 2023-03-13

【中文标题】在 Angular 2 中使用 *ngFor 和 JSON 对象

【英文标题】：Using *ngFor with a JSON object in Angular 2

【发布时间】：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 博客文章，所以我正在尝试构建一个文章页面和一个单独的文章页面。

【参考方案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/