Angular 6: Ошибка: не удается найти другой поддерживающий объект «[объект объект]» типа «объект». NgFor поддерживает привязку только к Iterables, таким как Array

Я создал приложение angular, которое получает данные из локального файла json. Но у меня проблемы с отображением данных в формате html. Многие переменные на голландском языке, извините за это, я немного новичок во всем этом :)

Это моя услуга:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import { City } from './city';

@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  citiesListUrl = "assets/city.list.json";
  constructor(private http: HttpClient) {
  }

  public getCities(): Observable<HttpResponse<City[]>>{
    return this.http.get<City[]>(this.citiesListUrl, {observe: 'response'})
                    .pipe(retry(3), catchError(this.handleError)
    );
  }
}

Это компонент:

import { Component, OnInit, HostListener } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { WeatherService} from './weather.service';
import { Observable } from 'rxjs';
import { City } from './city';

@Component({
  selector: 'app-weather',
  templateUrl: './weather.component.html',
  styleUrls: ['./weather.component.css'],
  providers: [WeatherService]
})
export class WeatherComponent implements OnInit {
  public cities:City[];
  headers;
  error;

  constructor(private weatherService: WeatherService) { }

  public getCities(){
    this.weatherService.getCities()
      .subscribe(resp => {
        // display its headers
        const keys = resp.headers.keys();
        this.headers = keys.map(key =>
          `${key}: ${resp.headers.get(key)}`);

        // access the body directly.
        this.cities = { ... resp.body }},
        error => this.error = error);
  }

  ngOnInit() {
    this.getCities();
  }

}

А это HTML-код:

<div class="row">
  <div class="col">
      <ul>
          <li *ngFor="let ci of cities">
              {{ci.name}}
          </li>
      </ul>
  </div>
</div>

Я пробовал с другим ответом, они думали, что разработчики Angular 4 не работали над моим кодом. Я тоже пробовал использовать асинхронный канал, но он работает.


angular angular6
person Francisco Pizarro    schedule 13.06.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward 

this.cities = { ... resp.body }},

Это должно быть

this.cities = [ ... resp.body ]

Как указано в ошибке, *ngFor будет выполнять итерацию только по массиву, а не по объекту, поэтому вам нужно вставить данные JSON в массив, как я уже упоминал.

person Pardeep Jain    schedule 13.06.2018
comment
О, да! Это работает, спасибо миллионному Pardeep !! Вчера я провел с ним целый день - person Francisco Pizarro; 13.06.2018
comment
Рады узнать :) - person Pardeep Jain; 13.06.2018
comment
вы можете отметить мой ответ голосом "за" и зеленой галочкой: P - person Pardeep Jain; 13.06.2018
comment
Конечно, я просто жду, когда страница разрешит это ;-) - person Francisco Pizarro; 13.06.2018

arrow_upward
0
arrow_downward

[https://forum.ionicframework.com/t/solved-ngfor-only-supports-binding-to-iterables-such-as-arrays/59597/9estive

this solved my issue

 getBooks() 
      {
        this.isbnsource.getBooks(this.isbn).subscribe(
          data => { this.foundBooks = data.json();
     this.foundBooks = Array.of(this.foundBooks); 
           },
          err => console.error(err), `enter code here`
          () => console.log('getBooks completed') 
          );
     }
person Rajesh Rajoji    schedule 03.10.2018