1

httpクライアント経由でjsonを読み込もうとしていますが、ビューになると常に次のエラーが発生します。

NgFor only supports binding to Iterables such as Arrays

console.log の出力を見ると、それが他のオブジェクトを含むオブジェクトであることがわかります。ここに画像の説明を入力

それは私のサービスコードです：

@Injectable()
export class DataService {
  data: any;

  constructor(private http: Http) {
    this.data = null;
  }

  load() {

      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.
    return this.http.get('http://localhost:3000/db') //json url
      .map(res => res);
  }
}

次に、データがロードされる page.ts コンストラクター:

constructor(private nav:NavController, navParams:NavParams, http:Http, public service:DataService) {
        this.service.load().subscribe (
            response => {
                this.displayData=response;
                console.log(this.displayData);
            },
            error => console.log ('error in download')
        );
}

私のpage.html ngfor：

<ion-card *ngFor="let data of displayData">
</ion-card>

最後に、ローカルホストの URL からの私の json:

{
  "0": {
    "title": "Erreichbarkeit",
    "items": [
      {
        "name": "1",
        "value": "a"
      },
      {
        "name": "2",
        "value": "b"
      },
      {
        "name": "3",
        "value": "c"
      }
    ]
  },
  "1": {
    "title": "Erreichbarkeit 2",
    "items": [
      {
        "name": "1",
        "value": "g"
      },
      {
        "name": "2",
        "value": "f"
      },
      {
        "name": "3",
        "value": "e"
      }
    ]
  }
}

これが私を夢中にさせる原因が間違っていることを誰かが知っていることを願っています。

4

1 に答える 1

4

あなたの Json は[{"title" : ...}, {"title": ...}]、配列ではなく、 0と1という 2 つのプロパティを持つオブジェクトであるためです。次のようにJsonを変更してみましたか：

[
  {
    "title": "Erreichbarkeit",
    "items": [
      {
        "name": "1",
        "value": "a"
      },
      {
        "name": "2",
        "value": "b"
      },
      {
        "name": "3",
        "value": "c"
      }
    ]
  },
  {
    "title": "Erreichbarkeit 2",
    "items": [
      {
        "name": "1",
        "value": "g"
      },
      {
        "name": "2",
        "value": "f"
      },
      {
        "name": "3",
        "value": "e"
      }
    ]
  }
]

そして今、あなたの見解では：

<ion-card *ngFor="let data of displayData">

    <ion-card-header>{{data.title}}</ion-card-header>   

    <ion-card-content >
        <p *ngFor="let item of data.items">{{item.name}} : {{item.value}}</p>
    </ion-card-content>

</ion-card>
于 2016-07-12T09:47:59.810 に答える