Angular Ionic应用程序将JSON转换为数组

我对离子型和角型都很陌生，所以如果这个问题没有多大意义，请原谅

平台：离子3

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

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

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

由以下内容组成的爱奥尼亚页面“列表”：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>

{{light.name}
{{light.type}

尽管console log语句正确显示了JSON，但由于以下错误，我无法在list.html中使用ngFor对其进行迭代

找不到类型为“object”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件

---

我意识到我需要将JSON转换成javascript数组，但不确定在哪里或如何转换。非常感谢任何指针。

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

data => resolve(Object.keys(data).map(key => data[key]))

这将使用promise中的一个对象数组进行解析，并且应该可以使用您的组件

我要指出的是，你不必使用你自己的承诺，你可以使用可观察的方法

getLights() {
  return this.http.get(`${this.apiUrl}/lights`).map(data =>
    Object.keys(data).map(key => data[key])
  ).toPromise();
}

事实上，您甚至不需要使用承诺，只需订阅

getLights

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

注:

如果这不是使用Angular 5，我认为您需要执行以下操作：

this.http.get(url).map(response => response.json())

---

也在可观察链中。

感谢您的上述回复。非常有帮助，但不幸的是我没能让它像我期望的那样工作。。。可能是因为我缺乏经验

我仍然无法回避JSON包含数字作为键并能够在灯光上迭代的问题

但是，我能够投射一个light的响应（修改API调用以获得light“1”）：

使用接口：

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

this.http.get（this.apirl+'/lights/1'）。订阅（数据=>{
console.log（data.state.bri）；
})

如果有人能详细说明一个界面的结构，可以成功地在关键是数字的地方投射出一个灯光列表，那将是理想的

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

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