json Angular：“找不到类型为”object“的其他支持对象”[object Object]“,NgFor仅支持绑定到诸如数组等迭代对象”

neekobn8 于 2022-12-24 发布在 Angular

关注(0)|答案(4)|浏览(156)

我已经创建了一个angular应用程序，它从json文件中获取数据。但是我在用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>

JSON

来源：https://stackoverflow.com/questions/43998092/angular-cannot-find-a-differ-supporting-object-object-object-of-type-obje

4条答案

按热度按时间

wztqucjr1#

正如错误消息所述，ngFor只支持Array这样的迭代，因此不能将其用于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
}

赞(0）回复(0）举报 2022-12-24

0dxa2lsx2#

记住要将Observable传输到async，比如*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这样的符号

赞(0）回复(0）举报 2022-12-24

wqnecbli3#

您只需要async管道：

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

在直接处理观察对象而不显式取消订阅时，始终使用async管道。

赞(0）回复(0）举报 2022-12-24

7cjasjjr4#

我也有同样的问题，正如彭伊所建议的，这就是解决办法。非常感谢。
我在浏览器控制台上遇到的问题：

页面错误：3错误提示：尝试比较“[object 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(); 
      });
  }

}

赞(0）回复(0）举报 2022-12-24

我来回答

json Angular：“找不到类型为”object“的其他支持对象”[object Object]“,NgFor仅支持绑定到诸如数组等迭代对象”

4条答案

相关问题

热门标签

最新问答