Ionic 2 Angular 2 获取 REST JSON 数据

Question

我可能只是在某个地方犯了一个愚蠢的错误，但我只是不再看到它了。

我有一个非常简单的 Ionic 2 Angular 2 应用程序。请不要打扰架构，我只是想让它先工作。我正在尝试使用从 REST JSON 服务获得的模块对象填充我的数组“configuredModules”。我创建了一个将数组记录到控制台的按钮，因此我可以看到数组的值是什么，但始终未定义。我做错了什么？

export class Module {
    type: string;
    physicalLocationName: string;
}

和我的主要课程：

import { Component, OnInit } from '@angular/core';
import { Module } from './module';
import { HttpModule, Http, Response} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/toPromise';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit{
  configuredModules: Module[];
  http: Http;

  constructor(public navCtrl: NavController,private _http: Http) {
    this.http = _http;
  }

  getConfiguredModules(){
      this.getModules()
        .then(modules => this.configuredModules = modules);
        console.log('finished configuredModules');
  }

  getModules(): Promise<Module[]> {
    return       this.http.get('http://localhost:8080/rest/modules/configuredModules')
           .toPromise()
           .then(response => response.json().data as Module[])
          ;
  }

  ngOnInit() {
      this.getConfiguredModules();
  }

  buttonClicked(){
    console.log('button clicked');
    console.log(this.configuredModules.values);
  }
}

如果我查看 Chrome 的网络标签，我可以看到以下内容（响应中）：

{"modules":[{"type":"myTestType","physicalLocationName":"myTestPhysicalLocation"}]}

所以我知道数据正在进入，但它并没有填满我的数组。有什么建议么？ 我认为我的代码看起来与 Angular 2 的英雄教程相同： https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

Answer 1

你的错误在于这个函数：

getModules(): Promise<Module[]> {
  return this.http.get('http://localhost:8080/rest/modules/configuredModules')
    .toPromise()
    .then(response => response.json().data as Module[]);
}

删除json() 函数后的.data 并添加.modules。这就是来自您的 API 的内容，因此应该如下所示：

getModules(): Promise<Module[]> {
    return this.http.get('http://localhost:8080/rest/modules/configuredModules')
           .toPromise()
           .then(response => response.json().modules as Module[]);
  }

然后在你的按钮点击功能上，删除values，所以它看起来像这样：

buttonClicked(){
  console.log('button clicked');
  console.log(this.configuredModules);
}