Angular2 ngfor: undefined ist kein Objekt

Question

Ich bin neu in angular2 und habe Probleme, herauszufinden, wie ein in meinem slotSetting.component.ts arbeiten for-Schleife zu erhalten:

Mein API-Aufruf funktioniert und gibt eine json Anruf, der das Format meiner Gerät.ts Datei entspricht

In meiner Konsole bekomme ich alle richtigen Daten. ids zeigen als eine Liste der Geräte-IDs auf, die, was ich

in meinem html auftauchen sehen möchten, aber wenn ich hinzufügen, was ich unten in meinem HTML-Datei habe ich eine Störung erhalte, das sagt:

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

Jede Hilfe wäre willkommen, danke!

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; 
      } 
     ] 


    } 

} 

Answer 1

hinzufügen ngIf Richtlinie

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