Angular：'找不到'object'类型的不同支持对象'[object Object]'。 NgFor 仅支持绑定到 Iterables，例如 Arrays'

Posted 2023-02-22

【中文标题】Angular：\'找不到\'object\'类型的不同支持对象\'[object Object]\'。 NgFor 仅支持绑定到 Iterables，例如 Arrays\'

【英文标题】：Angular: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays'Angular：'找不到'object'类型的不同支持对象'[object Object]'。 NgFor 仅支持绑定到 Iterables，例如 Arrays'

【发布时间】：2017-10-15 08:04:37

【问题描述】：

我创建了一个从 json 文件获取数据的 Angular 应用程序。但是我在用 html 显示数据时遇到了问题。很多变量都是荷兰语，我很抱歉。我对这一切也有点陌生:)

这是我的服务：

import Injectable from '@angular/core';
import Http, RequestOptions, Response, Headers from '@angular/http';
import Observable from "rxjs";
import Afdelingen from "./models";

@Injectable()
export class AfdelingService 
  private afdelingenUrl = '/assets/backend/afdelingen.json';
    constructor(private http: Http) 
      

      getAfdelingen(): Observable<Afdelingen[]> 
        return this.http.get(this.afdelingenUrl)
          .map(this.extractData)
          .catch(this.handleError);
      

      private extractData(res: Response) 
        let body = <Afdelingen[]>res.json();
        return body || ;
      

      private handleError(error: any): Promise<any> 
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
      

      addAfdeling(afdelingsNaam: string, afdeling: any): Observable<Afdelingen> 
        let body = JSON.stringify("afdelingsNaam": afdelingsNaam, afdeling: afdeling);
        let headers = new Headers('Content-Type': 'application/json');
        let options = new RequestOptions(headers: headers);
        return this.http.post(this.afdelingenUrl, body, options)
          .map(res => <Afdelingen> res.json())
          .catch(this.handleError)
      
    

这是我的 json 文件的一部分：

  "afdelingen": [
    
      "afdelingsNaam": "pediatrie",
      "kamernummer": 3.054,
      "patientid": 10001,
      "patientennaam": "Joske Vermeulen",
      "reden": "Appendicitis",
      "opname": "12/05/2017",
      "ontslag": "28/06/2017",
      "behandelingstype": "nazorg",
      "behandelingsomschrijving": "wondverzorging",
      "behandelingsdatum": "10/06/2017",
      "behandelingstijd": "10:20",
      "vegitarisch": false,
      "Opmerkingen": "",
      "sanitair": true,
      "kinderverzorgingsruimte": false,
      "salon": true,
      "hulp": true,
      "width": 5,
      "height": 5
    ,
    
      "afdelingsNaam": "pediatrie",
      "kamernummer": 3.055,
      "patientid": 10002,
      "patientennaam": "Agnes Vermeiren",
      "reden": "Beenbreuk",
      "opname": "18/05/2017",
      "ontslag": "30/06/2017",
      "behandelingstype": "nazorg",
      "behandelingsomschrijving": "wondverzorging",
      "behandelingsdatum": "10/06/2017",
      "behandelingstijd": "10:20",
      "vegitarisch": true,
      "Opmerkingen": "",
      "sanitair": true,
      "kinderverzorgingsruimte": false,
      "salon": true,
      "hulp": false,
      "width": 5,
      "height": 5
    ]

组件：

import Component, OnInit, Input from '@angular/core';
import Afdelingen from "../models";
import AfdelingService from "../afdeling.service";
import PatientService from "../patient.service";


@Component(
  selector: 'app-afdeling',
  templateUrl: './afdeling.component.html',
  styleUrls: ['./afdeling.component.css']
)
export class AfdelingComponent implements OnInit 

 afdeling: Afdelingen[];
 errorMessage:string;

  constructor(private afdelingService: AfdelingService, private patientService: PatientService)  

  ngOnInit() 
    this.getData()
  

  getData() 
    this.afdelingService.getAfdelingen()
      .subscribe(
        data => 
          this.afdeling = data;
          console.log(this.afdeling);
        , error => this.errorMessage = <any> error);

  

和html：

<ul>
  <li *ngFor="let afd of afdeling">
    afd.patientid
  </li>
</ul>

【问题讨论】：

Angular2: Cannot find a differ supporting object '[object Object]'的可能重复

【参考方案1】：

如错误信息所述，ngFor 仅支持 Array 等 Iterables，因此您不能将其用于 Object。

改变

private extractData(res: Response) 
  let body = <Afdelingen[]>res.json();
  return body || ;       // here you are return an object

到

private extractData(res: Response) 
  let body = <Afdelingen[]>res.json().afdelingen;    // return array from json file
  return body || [];     // also return empty array if there is no data

【讨论】：

是的！就是这样……我整个早上都在做这个。非常感谢@Pengyy。你摇滚！

从 Angular 6 开始，您现在可以使用 keyvalue 管道遍历对象，该管道将对象映射到具有 key 和 value 属性的对象数组。 See documentation

【参考方案2】：

记住将 Observables 通过管道传递给异步，例如 *ngFor item of items$ | async，您尝试在其中 *ngFor item of items$ 其中 items$ 显然是一个 Observable，因为您使用类似于 items$: Observable<IValuePair> 的 $ 标记它，并且您的分配可能类似于this.items$ = this.someDataService.someMethod<IValuePair>()，它返回一个 T 类型的 Observable。

除此之外...我相信我使用了像 *ngFor item of (items$ | async)?.someProperty 这样的符号

【讨论】：

这是我的确切问题，错误消息根本没有帮助。

这对我有帮助 *ngFor item of (items$ | async)?.someProperty 谢谢，亚当！

【参考方案3】：

您只需要async 管道：

<li *ngFor="let afd of afdeling | async">
    afd.patientid
</li>

在直接处理 Observables 时始终使用async 管道，无需显式取消订阅。

【参考方案4】：

我遇到了同样的问题，正如 Pengyy 建议的那样，这就是解决方法。非常感谢。

我在浏览器控制台上的问题：

PortafolioComponent.html:3 ERROR 错误：尝试比较 '[object 目的]'。只允许使用数组和可迭代对象(...)

就我而言，我的代码修复是：

//productos.service.ts
import  Injectable  from '@angular/core';
import  Http  from '@angular/http';

@Injectable()
export class ProductosService 

  productos:any[] = [];
  cargando:boolean = true;

  constructor( private http:Http) 
    this.cargar_productos();
  

  public cargar_productos()

    this.cargando = true;

    this.http.get('https://webpage-88888a1.firebaseio.com/productos.json')
      .subscribe( res => 
        console.log(res.json());
        this.cargando = false;
        this.productos = res.json().productos; // Before this.productos = res.json(); 
      );
  

【讨论】：

res.json() 有帮助。谢谢