Question

我是angular2的新手，我无法弄清楚如何在我的slotSetting.component.ts中使用for循环：

我的API调用正在运行并返回一个与我的device.ts文件格式相匹配的json调用

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

但是当我在html文件中添加下面的内容时，我收到的错误是：

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

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

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

添加到标签ngIf指令

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

Angular2 ngfor：undefined不是对象

1 个答案: