需要使用angular 2访问和循环json数组

Question

我访问此API以获取JSON对象，我需要“图像”组件路径和“用户名”才能在html中显示。但我一直收到此错误

找不到'对象'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到诸如Arrays之类的Iterables。

组件文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Http,Headers} from '@angular/http';
import { SalePage } from '../sale/sale';
import * as Variables from '../variables';

@Component({
  selector: 'page-store',
  templateUrl: 'mystore.html'
})
export class MystorePage {
  items:any;

  constructor(public navCtrl: NavController,public http:Http) {
    this.testget();
  }
  onLoadSale(){
    this.navCtrl.push(SalePage);
  }
  testget(){
    console.log("testget");
     this.http.get('http://url/api/url').map(res=>res.json()).subscribe(data=>{
       this.items=data;
       console.log(data.image);
     });   
  }
}

HTML文件

<ion-header>
    <ion-navbar>
       <ion-title align-title="center" style="margin-left:2%;"> 
            <span style="color:#ffffff">My Store</span>
        </ion-title>
        <ion-buttons end>
               <ion-icon style="color:#ffffff;font-size:30px;visibility:hidden" name="settings"></ion-icon>
       </ion-buttons>
    </ion-navbar>
    <ion-navbar>
      <ion-title>
          <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
      </ion-title>
</ion-navbar>
</ion-header>
    <ion-content>
     <ion-list style="margin-top:10px">
        <div *ngFor="let item of items" class="background" (click)="onLoadMyStore()">
             <h1 style="position:absolute;margin-top:120px;margin-left:10px;color:#000000">{{item.stores.image}}</h1>
             <img src="{{item.stores.image.path}}">
        </div>
    </ion-list>
</ion-content>

JSON对象

{
    "success": true,
    "errors": [],
    "errfor": {},
    "value": "stores",
    "stores": [
        {
            "_id": "5959e0a832fcb649418fabec",
            "__v": 0,
            "search": [
                "Addidas"
            ],
            "likes": [],
            "userCreated": {
                "id": "5953c2b87b65b04eb15f8c5c",
                "time": "2017-07-03T06:14:00.119Z",
                "name": "user1"
            },
            "sales": [],
            "image": {
                "name": "pl.jpg",
                "path": "/uploads/1499062565052_pl.jpg"
            },
            "admin": {
                "name": ""
            },
            "rep2": {
                "name": ""
            },
            "rep1": {
                "name": ""
            },
            "username": "Addidas"
        },
        {
            "_id": "5959fa9ce24f1e4d3a606b1f",
            "__v": 0,
            "search": [
                "STORE2"
            ],
            "likes": [],
            "userCreated": {
                "id": "5953c2b87b65b04eb15f8c5c",
                "time": "2017-07-03T08:04:44.355Z",
                "name": "user1"
            },
            "sales": [],
            "image": {
                "name": "10-dithering-opt.jpg",
                "path": "/uploads/1499069092512_10-dithering-opt.jpg"
            },
            "admin": {
                "name": ""
            },
            "rep2": {
                "name": ""
            },
            "rep1": {
                "name": ""
            },
            "username": "STORE2"
        },
        {
            "_id": "595a00913996594e24aa1808",
            "__v": 0,
            "search": [
                "DemoStore"
            ],
            "likes": [],
            "userCreated": {
                "id": "5959ffe53996594e24aa1807",
                "time": "2017-07-03T08:30:09.369Z",
                "name": "DemoUser"
            },
            "sales": [],
            "image": {
                "name": "photo.jpg",
                "path": "/uploads/1499070897512_photo.jpg"
            },
            "admin": {
                "name": ""
            },
            "rep2": {
                "id": "595a00e33996594e24aa180a",
                "name": "DemoRep2"
            },
            "rep1": {
                "id": "595a00aa3996594e24aa1809",
                "name": "DemoRep1"
            },
            "username": "DemoStore"
        }
    ]
}

Answer 1

您需要将stores分配给items，如下所示：

this.items = data.stores;

在HTML中：

<div *ngFor="let item of items" class="background" (click)="onLoadMyStore()">
     <h1 style="position:absolute; margin-top:120px; margin-left:10px; color:#000000;">{{ item.image.name }}</h1>
     <img src="{{ item.image.path }}">
</div>

Answer 2

您需要通过访问数据对象的存储来执行此类操作。

 <ion-list style="margin-top:10px">
        <div *ngFor="let item of items.stores" class="background" (click)="onLoadMyStore()">
             <h1 style="position:absolute;margin-top:120px;margin-left:10px;color:#000000">{{item.image}}</h1>
             <img src="{{item.image.path}}">
        </div>
    </ion-list>

或者你可以在.ts文件中执行此操作

this.items = data.stores;

Answer 3

基于你的console.log你需要将stores属性放入items

testget(){
    console.log("testget");
    this.http.get('http://url/api/url').map(res=>res.json()).subscribe(data=>{
       this.items=data.stores;
       console.log(data.image);
    });   
}