错误找不到类型为“对象”的其他支持对象“ [对象对象]”

Question

我是Angular 8的新手，我正在尝试实现一项服务，以将JSON格式的数据加载到API中，但是在控制台上出现以下错误< / p>

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

我也一直在阅读有关此错误的类似问题，但我仍无法解决

这是我进行服务调用的.ts代码

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

  private CarURL = 'https://catalogo-autos.herokuapp.com/api/autos';

  constructor(private http: HttpClient) { }

 getCars(): Observable<Car[]>{

   return this.http.get<Car[]>(this.CarURL);

 }
}

这是服务：

  ngOnInit() {

    this.getCars();
  }

  getCars(): void {

    this.carService.getCars().subscribe((carsTemp)=>{
      this.cars = carsTemp;
    })
  }

最后是我的HTML标记

<ng-container *ngFor="let car of cars">
    <div class="cars">
        <div class="fas fa-eye" (click)="onSelect(car,infAuto)"></div>
        <div>{{car.description}} </div>
    </div>
</ng-container>

我将不胜感激

Answer 1

您必须访问获得的响应的data属性。您得到的对象不是数组。它是带有一些额外数据的对象，data字段之一实际上是您的必需属性。您必须记住，编译打字稿代码后，您会收到js，并且通过JSON.parse解析了respone（请注意，何时某些字段是Date类型的）

Answer 2

正在加载API，看起来所需的cars数组实际上位于data属性中。

您可以将结果映射到data属性，然后再将可观察值返回给控制器。尝试以下

服务

@Injectable({
  providedIn : 'root'
})
export class CarsService {
  private CarURL = 'https://catalogo-autos.herokuapp.com/api/autos';

  constructor(private http: HttpClient) { }

  getCars(): Observable<Car[]>{
    return this.http.get<Car[]>(this.CarURL).pipe(map(response => response.data));
  }
}