Angular2 ngfor:未定义不是对象

我是angular2的新手，很难弄清楚如何让for循环在我的插槽中工作。component.ts：

我的API调用正在工作，并返回与我的device.ts文件格式匹配的json调用

在我的控制台中，我得到了所有正确的数据。ID显示为设备ID的列表，这是我希望在html中看到的

但是，当我在html文件中添加下面的内容时，我得到一个错误，该错误表示：

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

任何帮助都将不胜感激，谢谢

开槽服务

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.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>

---

添加到标记ngIf指令

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

…

尝试在模板中使用安全导航操作符：

configStb？.config？.devices

。

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


    }

}

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