Question

我对Ionic和Angular都很陌生，所以请原谅这个问题没有多大意义。

平台：离子3。

我有一个提供者：rest.ts如下

getLights() {
  return new Promise(resolve => {
    this.http.get(this.apiUrl+'/lights').subscribe(data => {
      resolve(data);
    }, err => {
      console.log(err);
    });
  });
}

这将返回以下数据（已删除敏感信息）

{
    "1": {
        "state": {
            "on": false,
            "bri": 98,
            "alert": "none",
            "reachable": true
        },
        "swupdate": {
            "state": "noupdates",
            "lastinstall": null
        },
        "type": "Dimmable light",
        "name": "Lion",
        "modelid": "LWB010",
        "manufacturername": "Philips",
    },
    "2": {
        "state": {
            "on": true,
            "bri": 100,
            "alert": "none",
            "reachable": true
        },
        "swupdate": {
            "state": "noupdates",
            "lastinstall": null
        },
        "type": "Dimmable light",
        "name": "Brutus",
        "modelid": "LWB010",
        "manufacturername": "Philips",
    },
    "3": {
        "state": {
            "on": true,
            "bri": 254,
            "hue": 8418,
            "sat": 140,
            "effect": "none",
            "xy": [
                0.4573,
                0.41
            ],
            "ct": 366,
            "alert": "none",
            "colormode": "ct",
            "reachable": true
        },
        "swupdate": {
            "state": "noupdates",
            "lastinstall": null
        },
        "type": "Extended color light",
        "name": "Hue lightstrip plus 1",
        "modelid": "LST002",
        "manufacturername": "Philips"
    }
}

离子页面'列表'由：list.ts

组成

export class ListPage {

  lights: any;
  icons: string[];

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public restProvider: RestProvider) {

    this.getLights();
  }

  getLights() {
    this.restProvider.getLights()
    .then(data => {
      this.lights = data;
      console.log(this.lights);
    });
  }

}

和list.html：

<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let light of lights">
      <h2>{{light.name}}</h2>
      <p>{{light.type}}</p>
    </ion-item>
  </ion-list>
</ion-content>

虽然控制台日志语句正确显示了JSON，但由于以下错误，我无法使用list.html中的ngFor进行迭代。

无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到诸如Arrays之类的Iterables。

我意识到我需要将JSON转换为javascript数组，但不确定在何处或如何执行此操作。任何指针都会非常感激。

Answer 1

有多种方法可以将类似数组的对象转换为数组，具体取决于它的组成方式。在这种情况下，您可以通过以下方式轻松完成：

<form action="/#wpcf7-f519-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="519">
<input type="hidden" name="_wpcf7_version" value="4.9.1">
<input type="hidden" name="_wpcf7_locale" value="pt_BR">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f519-o1">
<input type="hidden" name="_wpcf7_container_post" value="0">
</div>
<p><label> Name: </label> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </p>
<p><label> E-mail: </label> <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </p>
<p><label> Message: </label> <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></span></p>
<p><label>  </label> <span>  </span><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>

这将解决来自promise的一组对象，并且应该与您的组件一起使用。

我会指出你不必使用自己的Promise，你可以使用Observable方法data => resolve(Object.keys(data).map(key => data[key]))：

toPromise

事实上，您甚至不需要使用承诺，而只需订阅getLights() { return this.http.get(`${this.apiUrl}/lights`).map(data => Object.keys(data).map(key => data[key]) ).toPromise(); }。

getLights

注：

如果没有使用Angular 5，我认为您需要这样做：

this.restProvider.getLights().subscribe(data => {
  this.lights = data;
});

在Observable链中。

Answer 2

感谢您的回复。非常有帮助，但不幸的是，我无法按照我的预期使用任何工作......可能是我的经验不足。

我仍然无法解决包含数字作为键的JSON问题，并且能够遍历灯光....

然而，我能够投射一盏灯的响应（改变我的API调用以获得亮光＆＃39; 1＆＃39;）：

{
"state": {
   "on": false,
   "bri": 98,
   "alert": "none",
   "reachable": true
},
"swupdate": {
  "state": "noupdates",
  "lastinstall": null
},
"type": "Dimmable light",
"name": "Lion",
"modelid": "LWB010",
"manufacturername": "Philips",
}

使用接口：

export interface State {

  on: boolean;
  bri: number;
  alert: string;
  reachable: boolean;
}

export interface Swupdate {
  state: string;
  lastinstall?: any;
}

export interface Light {
  state: State;
  swupdate: Swupdate;
  type: string;
  name: string;
  modelid: string;
  manufacturername: string;
  uniqueid: string;
  swversion: string;
  swconfigid: string;
  productid: string;
}

然后使用HttpClient调用来转换对象，如下所示：

this.http.get<Light>(this.apiUrl+'/lights/1').subscribe(data => {
        console.log(data.state.bri);
})

如果有人可以详细说明可能成功投射灯光列表的接口结构，那么这将是理想的......

Ionic App将JSON转换为数组

2 个答案: