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

Question

Я создал угловое приложение, которое получает данные из локального файла 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, они не работали над моим кодом.Я тоже пробовал с асинхронным каналом, но он работает.

Answer 1

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

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') 
          );
     }

Answer 2

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

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

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

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