Ionic2 Ngfor поддерживает только массив

Я пытаюсь загрузить json через http-клиент, но когда дело доходит до представления, я всегда получаю эту ошибку:

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>

И, наконец, мой json из URL-адреса localhost:

{
  "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"
      }
    ]
  }
}

Надеюсь, кто-нибудь знает, что не так, потому что это сводит меня с ума.


person Zero    schedule 12.07.2016    source источник
comment
Это не похоже на массив. Как вы строите его на стороне сервера?   -  person rinukkusu    schedule 12.07.2016
comment
Ваш Json должен быть [{"title" : ...}, {"title": ...}], потому что сейчас это не array, а object с двумя properties с именами 0 и 1   -  person sebaferreras    schedule 12.07.2016
comment
это простой файл json   -  person Zero    schedule 12.07.2016
comment
ваш json не обязательно должен быть определенным, потому что вы не всегда можете контролировать, как API предоставляет его, все, что вам нужно сделать, это преобразовать его в массив ... stackoverflow.com/questions/684672/   -  person Aaron Saunders    schedule 12.07.2016


Ответы (1)


Ваш Json должен быть [{"title" : ...}, {"title": ...}], потому что сейчас это не массив, а объект с двумя свойствами: 0 и 1 . Вы пытались изменить 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>
person sebaferreras    schedule 12.07.2016
comment
Большое спасибо, это была моя проблема. Эта совершенно новая угловая, ионная, json-вещь для меня нова ... - person Zero; 12.07.2016
comment
Рад быть полезным. Это довольно интересные технологии, так что получайте удовольствие от них :) - person sebaferreras; 12.07.2016