web-dev-qa-db-ja.com

タイプ 'オブジェクト'の異なるサポートオブジェクト '[オブジェクトオブジェクト]'が見つかりません。 NgForは、配列などのIterableへのバインドのみをサポートします

私は同様の質問を見ましたが、どれも私を助けませんでした。次のようなオブジェクトを受け取ります。

[
  {
    "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.

それで、このコードで何が問題なのでしょうか？

angularangular-template
48
Jeff

get呼び出しを行うときにthis.requests=を使用する必要はありません（その後requestsは監視可能なサブスクリプションを持ちます）。監視可能なsuccessで応答が返されるので、成功するとrequestsの値を設定するのが理にかなっています（既に実行しています）。

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

からthis.requestsを削除します

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

に

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

this._http.getRequest()は、応答値ではなくサブスクリプションを返します。応答値は、subscribe(...)に渡されるコールバックによって割り当てられます

13
Günter Zöchbauer

JSOnファイルで、以下の変更を行ってください。

 {
    "data":
    [
      {
        "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"
      }
    ]
    }

それとその後：

 this.http.get(url).map(res:Response) => res.json().data);

データは、実際にはjsonファイルのtgeコレクションの名前です。上記のコードを試してください、私はそれが動作することを確信しています。

7
vivekinall

書籍を（2行目で）配列として宣言できます。

  title: any = 'List of books are represted in the bookstore';
  books: any = []; 
  constructor(private service:  AppService){
  }

  ngOnInit(){
    this.getBookDetails();
  }

  getBookDetails() {
    this.service.getBooks().subscribe(books => {
      this.books = books.json();
      console.log(this.books);
    });
  }
6
Raj Kumar

HTTP応答を次のようにマッピングしたため、同じエラーが発生しました。

this.http.get(url).map(res => res.json);

メソッドではなく、変数のように誤って.jsonを呼び出したことに注意してください。

変更して：

this.http.get(url).map(res => res.json());

トリックをしました。

4
Christoph

私の解決策は、プロパティオブジェクトの値配列を返すためのパイプを作成することです

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'valueArray',
})
export class ValueArrayPipe implements PipeTransform {

  // El parametro object representa, los valores de las propiedades o indice
  transform(objects : any = []) {
    return Object.values(objects);
  }
}

テンプレートの実装

<button ion-item *ngFor="let element of element_list | valueArray" >
    {{ element.any_property }}
</button>
4
Ivan Fretes

私は同じ問題を抱えています。これは私が問題を修正した方法です。最初にエラーが発生すると、配列データはこのようにDBから取得されます-、

{brands: Array(5), _id: "5ae9455f7f7af749cb2d3740"}

データが配列を運ぶオブジェクトではなく、配列であることを確認してください。配列のみがこのように見えます-、

(5) [{…}, {…}, {…}, {…}, {…}]

それは私の問題を解決しました。

2
Sushil

以下のようなJSON形式のオブジェクトを反復処理するには

{
  "mango": { "color": "orange", "taste": "sweet" }
  "lemon": { "color": "yellow", "taste": "sour" }
}

  1. 変数に割り当てます

    let rawData = { "mang":{...}, "lemon": {...} }

  2. 値（またはキー）を保持するための空の配列を作成します

    let dataValues = []; //For values

    let dataKeys = []; //For keys

  3. キーをループし、値（およびキー）を変数に追加します

    for(let key in rawData) { //Pay attention to the 'in' dataValues.Push(rawData[key]); dataKeys.Push(key); }

  4. これで、* ngForまたはforループで使用できるキーと値の配列ができました

    for(let d of dataValues) { console.log("Data Values",d); }

    <tr *ngFor='let data of dataValues'> ..... </tr>

2
Nandu D

私は同じ問題に直面しています

私の最初のjson

{"items":

         [
           {"id":1,
            "Name":"test4"
           },
           {"id":2,
            "Name":"test1"
           }
         ]
}

内部でJSONを変更しました[]

[{"items":

         [
           {"id":1,
            "Name":"test4"
           },
           {"id":2,
            "Name":"test1"
           }
         ]
}]
2
Lijo

非同期パイプを使用する必要があります。 Doc： https://angular.io/api/common/AsyncPipe

例えば：

<li *ngFor="let a of authorizationTypes | async"[value]="a.id">
     {{ a.name }}
</li>
2
Mati Paz Wasiuchnik
<ul>
<li *ngFor = "let Data of allDataFromAws  | async">
  <pre> {{ Data | json}}</pre>
</li>
</ul>

非同期を使用してallDataFromAwsを配列オブジェクトに変換します...

1
jasraj

this.requests=resここでは、オブジェクトに次の応答を割り当てようとしています。

{"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK",
"url":"xyz","ok":true,"type":4,"body":[{}]}

オブジェクト形式は応答形式とは異なるため、必要なコンテンツを取得するには、応答からres.body部分を割り当てる必要があります。

1
atish shimpi

Angularでスプリングブートを使用します。デフォルトを作成するかどうかを確認してください

0
cmyldz

varをarrayとして宣言するだけで、データを保持しているので、うまくいきました。

listingdata:Array<any> = [];
this.listingdata = data.results.rows;

そして、htmlページのlistingdataをループします

0
Rakesh Pandey