Angular 6: Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Array

Question

我创建了一个 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 发展思想，他们没有研究我的代码。我也尝试过使用异步管道，但它有效。

Answer 1

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

这应该是

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

正如错误所述，*ngFor 只会遍历数组而不是对象，因此您需要像我提到的那样将 JSON 数据推入数组。

Answer 2

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

Angular 6: Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Array

Angular 6: Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Array

angular

angular6