CODEWITHSUNDEEP
angulartypescript
Kris
Kris

Reputation: 337

Angular2 ngfor: undefined is not an object

I am new to angular2 and am having trouble figuring out how to get a for loop working in my slotSetting.component.ts:

My API call is working and returns a json call that matches the format of my device.ts file

In my console I am getting all of the correct data. ids show up as a list of the device ids which is what I would like to see show up in my html

but when I add what I have below in my html file I am getting an error that says: 

TypeError: undefined is not an object(evaluating '_co.configStb.config')

Any help would be appreciated, thanks!

slotSetting.service.ts 

getDevices(): Observable<Device[]> {

    // return an observable
    return this.http.get(`${AppSettings.API_ENDPOINT}/config/hardware`)
      .map((responseData) => {
        console.log("return config hardware " + responseData.json());
        return responseData.json();
      })

  };

slotSetting.component.ts

  ngOnInit() {

    this._slotSettingService.getDevices()
      .subscribe(
      configStb => {this.devices = configStb;
      console.log("config" + JSON.stringify(configStb));
      console.log("devices" + JSON.stringify(configStb.config.devices));

       for (let i of configStb.config.devices) {
    console.log("ids " + JSON.stringify(i.id));

         };  

  }) 

  }

slotSetting.html

 <ul class="slots row">
        <li *ngFor="let i of configStb.config.devices; let index = i">
          <div class="thumbnail">
            <p> device ID= {{i.id}}</p>
          </div>
        </li>
        <br>
      </ul>

device.ts

export class Device {
    id: any;
    status: number;
    statusDetail: string;
    statusMessage: string;
    config: {
        devices: [
            {
                boxCode: string;
                id: number;
                irBus: number;
                irDevice: number;
                irPort: number;
                isActive: boolean;
                isEnabled: boolean;
                isTelnetEnabled: boolean;
                isWebSocketEnabled: boolean;
                macAddress: string;
                model: string;
                name: string;
                platform: string;
                powerDevice: number;
                powerPort: number;
                remoteType: string;
                resolution: string;
                telnetPort: number;
                videoPort: number;
                webSocketPort: number;
            }
        ]


    }

}

Upvotes: 1

Views: 996

Answers (1)

alehn96
alehn96

Reputation: 1393

Add to tag ngIf directive 

<ul class="slots row" *ngIf="configStb">...</ul>

Upvotes: 1

Related Questions