使用angular-2读取[object object]，

Question

我试图在我的应用程序中读取json文件，但它只显示我："object object".In控制台我可以看到，它映射到我的json file.but输出窗口，只显示"object object“，如下图所示。

这是home.html

 <ion-header>
  <ion-navbar>
    <ion-title>
     Home
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-card #myCard  *ngFor="let item of quotes.data">

  <ion-card-content>
    <ion-card-title>
    {{item.categories}}
    </ion-card-title>
    <p>
      {{item.menuItems}}
    </p>
  </ion-card-content>
 </ion-card>
</ion-content>

输出图像在此处

​

​

我的json文件

{

    "categories" : {
      "101flashlight" : {
        "desc" : "Crackers with multiple sounds",
        "thumb" : "infw/thumb/flash.svg",
        "title" : "Flash Light "
      },
      "102zamin" : {
        "desc" : "Crackers with sparks",
        "thumb" : "infw/thumb/zamin.svg",
        "title" : "Zamin Chakkars"
          }
}

服务文件quote.ts

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
@Injectable()
export class QuoteService{
    public data:any;
    private http:any;

constructor(http:Http){
    this.http=http;

}
getQuotes(){
    this.http.get("assets/data.json")
    .subscribe(res =>{
        this.data=res.json();
        this.data=Array.of(this.data);
        console.log(this.data);
    }, error =>{
        console.log(error);

    });
}
}

我想要显示title、desc和thumb

Answer 1

你的类别需要是一个可迭代的对象。目前您有一个JSON对象，并且Angular不能遍历对象的属性。

如果您可以更改JSON文件格式，它可能会有所帮助：

{
    "categories": [
        {
            "desc": "Crackers with multiple sounds",
            "thumb": "infw/thumb/flash.svg",
            "title": "Flash Light ",
            "cat": "101flashlight"
        },
        {
            "desc": "Crackers with sparks",
            "thumb": "infw/thumb/zamin.svg",
            "title": "Zamin Chakkars",
            "cat": "102zamin"
        }
    ]
}

如果你需要迭代一个对象，你可以查看Object#values方法，看看它是否有用：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values