Question

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

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

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的Heroes教程相同： 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[]);
}

删除.data功能后的json()，然后添加.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);
}

Ionic 2 Angular 2获取REST JSON数据

1 个答案: