Angular 2 * ngFor Error

Question

I am getting this error "find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

here is my code:

<tbody>

                <tr *ngFor='let tab of tabs'>
                    <td>
                        <ul class="list-unstyled list">
                            <li><a href="#" class="anchorLink"><i class="icon-home scolor"></i><font color="white">{{tab.TabName}}</font></a></li>

                        </ul>
                    </td>
                </tr>



            </tbody>

navMenu.copnent.ts

import { Component, OnInit } from '@angular/core';
import { NavMenuService } from './navMenu.service';
import { InavMenuTabs } from './navMenu';

@Component({
selector: 'nav-menu',
moduleId: module.id,
templateUrl: 'navMenu.component.html'

})

export class NavMenuComponent implements OnInit {

tabs: InavMenuTabs[];
errorMessage: string;
constructor(private _navMenuService: NavMenuService) {

}


ngOnInit(): void {
    this._navMenuService.getTabs(1, 'XXXX')
        .subscribe(tabs => this.tabs = tabs,      
        error => this.errorMessage = <any>error);



}
}

navMenu.service

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { InavMenuTabs } from './navMenu';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';

@Injectable()

export class NavMenuService {

private _fileUploadAPI = 'http://localhost:50180/API/FileUpload/GetTabs/';
constructor(private _http: Http) {

}

getTabs(LinkID: number, PSNL_UID: string): Observable<InavMenuTabs[]> {
    return this._http.get(this._fileUploadAPI + LinkID.toString() + '/' + PSNL_UID)
        .map((response: Response) => <InavMenuTabs[]>response.json())
        .do(data => console.log('All' + JSON.stringify(data)))
        .catch(this.handleError);


}

private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server Error');
}
}

navMenu.ts

export interface InavMenuTabs {

LinkTabID: number;
TabName: string;
}

Answer 1

Well, looking at your comments, that explains it. Your incoming data is not an Array, but an object named result , so you have to get the content from that object and store it in your array.

When you mapped your incoming data it showed:

{"result":[{"LinkTabID":1,"TabName":"Upload File"}]}

which is an object containing an array. So you have to get that array from your object.

ngOnInit(): void {
    this._navMenuService.getTabs(1, 'XXXX')
        .subscribe(
           data => {
             this.tabs = data.result
           });
}