1. ホーム
  2. angular

[解決済み] object' 型のオブジェクト '[object Object]' をサポートしている差分が見つかりません。NgFor は Array などの Iterable へのバインディングのみをサポートします。

2023-07-07 03:45:59

質問

似たような質問を見てみましたが、どれも役に立ちませんでした。 以下のようなオブジェクトを受け取ろうと思っています。

[
  {
    "id": 1,
    "name": "Safa",
    "email": "[email protected]",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 2,
    "name": "Safa",
    "email": "[email protected]",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 3,
    "name": "Salman",
    "email": "[email protected]",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  }
]

で、それを受信するためのhttpサービスがこちらです。

getRequest(){
        return this._http.get("http://consultationwebserver.herokuapp.com/requests").map(res => res.json());
    }

で、最後に、このようにサービスを呼び出す。

requests;
    constructor(private _http:requestService){}
    ngOnInit(){
        this.requests=this._http.getRequest().subscribe(res=>this.requests=res);
    }

残念ながら、ページがロードされると、次のように文句を言われます。

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

では、このコードのどこがおかしいのでしょうか?

どうすれば解決するのか?

ここでは this.requests= を作るときに get を呼び出す(その時 requests はobservableサブスクリプションを持つことになります)。応答は、observableの success を設定します。 requests の値を設定することは理にかなっています(すでにやっていますが)。

this._http.getRequest().subscribe(res=>this.requests=res);

それでもまだ型に関するエラーが表示される場合は、次のように any / RelevantModel という型を subscribe パラメータオブジェクトに設定します。

this._http.getRequest().subscribe(
  (res: any[]) => this.requests =res
);