Angular2 ngFor: What am I doing wrong?

Question

I find it difficult to overcome “Cannot find a different supporting object” [object Object] ”of type“ object ”, an error that seems really common with Angular2, and I hope that someone comes across something similar.

Here the (anonymous) JSON comes from my service, which is very simple:

[ { "item_id": 1, "item_type": 2, "item_name": "Item 1", "item_description": "First item" }, { "item_id": 2, "item_type": 4, "item_name": "Item 2", "item_description": "Second item" } ] 

And here is the contents of my class, service, and component that describes these objects:

 // item.ts export class Item { item_id: number; item_type: number; item_name: string; item_description: string; } //item.service.ts snippet getItems(): Promise<Item[]> { return this.http.get('http://apiurl', { withCredentials: true }) .toPromise() .then((response) => { let body = response.json(); return body as Item[]; }) .catch(this.handleError); } //item.component.ts snippet items: Item[]; getItems(): void { // Function that calls the item service this.itemService .getItems() .then((items) => { console.log(items); // I use this to verify that I'm getting an array. this.items = items; }); } 

And finally, the ngFor component:

 <ul> <li *ngFor="let item of items"> <i class="fa fa-database"></i> {{item.item_name}} </li> </ul> 

I see nothing wrong with any part of this. The resulting data definitely reaches the component of the component, which means that my import data is correct, and what is displayed in my console.log is definitely an array with the __proto__:Array[0] property __proto__:Array[0] and that’s it. It even looks identical to what is displayed if I console the Angular Heroes tutorial. But he simply will not iterate over the array, insisting that it is an object.

What am I doing wrong? Is ngFor just broken?

Edit Here is the complete (anonymous) class, with the removal of unbound bits:

 import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Headers, Response, Http, RequestOptions } from '@angular/http'; import { Item } from '../../classes/item/item'; import { ItemService } from '../../services/item/item.service'; @Component({ moduleId: module.id, selector: 'my-items', templateUrl: 'items.component.html' }) export class ItemComponent implements OnInit { items: Item[] = []; constructor( private router: Router, private itemService: ItemService ) { } getItems(): void { console.log(this.items); this.itemService .getItems() .then((items) => { console.log(items); this.items = Array.from(items); }); } ngOnInit() { this.getItems(); } } 

Edit 2 :

I understood! And I think this might be a bug in Angular2. Above, I cleared my code using a common variable name called "items". But in real, production code, the variable is called "entities." And all this time I called it that. On a whim, I changed the variable name to "testentities" and it worked!

So, to make sure, I tested several options, and it worked every time. Then I changed it to "entities" and the error reappeared. This seems to be a reserved variable.

I will carefully check this, and if it is constantly reproducible, I will report this to the error tracker.

Answer 1

Try

item.service.ts snippet

 getItems(): Promise<Item[]> { return this.http.get('http://apiurl', { withCredentials: true }) .toPromise() .then((response) => { let body = response.json(); return body; }) .catch(this.handleError); } 

item.component.ts snippet

 items: Item[] = []; // For whatever reason it thinks this is an Object getItems(): void { // Function that calls the item service //this.items = Array.from(this.items); this.itemService.getItems().then(items => this.items = items); } 

[UPDATE]

Go ahead, you have exhausted your debugging resources, so I’ll talk about it,

Angular 2 HTTP Client is where they show you how to make a GET request. Then HERE is a promise-based setup.

So that means you have to look like this.

item.service.ts snippet

 getItems(): Promise<Item[]> { return this.http.get('http://apiurl', { withCredentials: true }) .toPromise() .then(this.extractData) .catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body || { }; } private handleError (error: any) { // In a real world app, we might use a remote logging infrastructure // We'd also dig deeper into the error to get a better message let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error'; console.error(errMsg); // log to console instead return Promise.reject(errMsg); } 

item.component.ts

 items: Item[] = []; getItems(): void { this.itemService.getItems().then(items => this.items = items); } 

UPDATE # 2

It looks like the OP has figured out its problem, and this is due to the name of one of the variables, it would seem that a variable called entites could cause Angular 2 to break.

“But in real production code, the variable is called“ entities. ”And all this time I called it that. On a whim, I changed the variable name to“ testentities ”,“ and it worked!

Therefore, to make sure, I tested several options, and it worked every time. Then I changed it to "entities" and the error reappeared. "

 entities: any{};