Cannot find a differ supporting object '[object Object]' of type 'object'

Question

I am working on angular 2 application, in my current project I am getting the data from my API and It's gives the JSON like below.

{
    "makes": null,
    "models": null,
    "trims": null,
    "years": null,
    "assetTypes": {
        "2": "Auto",
        "3": "Motorcycle"
    }
}

Next I am converting the JSON data to typescript using json2ts tool from this link http://json2ts.com/

Typescript.ts

export interface AssetTypes {
    2: string;
    3: string;
}

export interface RootObject {
    makes?: any;
    models?: any;
    trims?: any;
    years?: any;
    assetTypes: AssetTypes;
}

Then After I will use below lines of code In my component.ts

 lookupdetailsassettypeinfo: RootObject;
 this._vehicleInfoService.getLookupDetailsTableAssetTypeInfo()
        .subscribe(lookupdetailsinfo => this.lookupdetailsassettypeinfo = lookupdetailsinfo,
        error => this.error = <any>error);

But when I am using the lookupdetailsassettypeinfo in my component.html like this below. it always gives the exception like Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

<select id="ASSET_TYPE" class="col-md-12 form-control" >
    <option>Select One</option>
    <option *ngFor='let type of lookupdetailsassettypeinfo'>{{type.assetTypes.Customer}}</option>
</select> 

Can you please tell me how to resolve the above exception.

-Pradeep

Answer 1

*ngFor doesn't support iterating over object properties. It only supports arrays.

See also Access Typescript Object Variables in Angular2