Ionic2 angular2 http从外部api获取json

我知道这可能是一个noob问题，因为我见过更复杂的东西，但要理解复杂的东西，我需要先理解简单的东西

我试图从api（laravel）的JSON字符串中获取名称：

代码是通过返回以下内容的路由创建的（在laravel中）：

在爱奥尼亚，我得到了这些文件：

page.ts：

export class Page {
  constructor(public http: Http) {}
    getJson() {
      this.http.get('http://external.ip/api')
          .map(res => res.json())
          .subscribe(
          data => this.data = data
      );
    }
}

page.html：

<ion-header>
  <ion-navbar>
    <ion-title>App</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-content>
    <ion-list>
      <ion-item>
        <h3>{{data.name}}<h3>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-content>

应用程序
{{data.name}

我知道这不起作用，但我需要帮助才能让它起作用。 我希望以后能够添加更多的名称。

---

在这之后，我希望能够将数据发布到api（例如添加名称或更改日期）。

假设有东西运行getJson（）（我添加了OnInit代码来实现这一点）。也给出了一个简单的帖子请求的快速示例。你可以订阅那篇文章，也可以保持原样

//Will need on OnInit to run getJson()
    import {Component, OnInit} from '@angular/core';


 export class Page implements OnInit {

  constructor(public http: Http) {}

data: any;

    getJson() {
      this.http.get('http://external.ip/api')
          .map(res => res.json())
          .subscribe(
          data => this.data = data;
      );
    }
//run getJson() at initial load
ngOnInit() {
 this.getJson();
}
     postJson(data:any) {
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });
    return this.http.post('http://52.11.14.57:4000/api/events', JSON.stringify(data), options)
      .map((res: Response) => res.json());
  }
        }
    }

---

非常感谢您的回复，我想我取得了一些进展，但现在我得到了一个空白的白页。我把“this.data:any；”改为“data:any；”。用“this.getJson”将“OnInit”改为“ngOnInit”。我暂时排除了post示例，因为它也给出了错误。我已经在html页面中添加了一些内容，但它不会显示。我的坏习惯是。data和onInit。我会改正的。Console.log响应和数据…告诉我您得到了什么我假设您遗漏了示例中的@Component decorator代码奇怪的是我没有从ionic serve得到错误。但在phpstorm中，当我将“Page”悬停在行中时，它会说：“export class Page实现了OnInit{”：没有实现接口OnInit的属性抽象。如果这是一个问题，则找不到解决方案。import{Component，OnInit}来自'@angular/core'；import{Http}来自'@angular/Http'；import'rxjs/add/operator/map'；

<ion-header>
  <ion-navbar>
    <ion-title>App</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-content>
    <ion-list>
      <ion-item>
        <h3>{{data.name}}<h3>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-content>

//Will need on OnInit to run getJson()
    import {Component, OnInit} from '@angular/core';


 export class Page implements OnInit {

  constructor(public http: Http) {}

data: any;

    getJson() {
      this.http.get('http://external.ip/api')
          .map(res => res.json())
          .subscribe(
          data => this.data = data;
      );
    }
//run getJson() at initial load
ngOnInit() {
 this.getJson();
}
     postJson(data:any) {
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });
    return this.http.post('http://52.11.14.57:4000/api/events', JSON.stringify(data), options)
      .map((res: Response) => res.json());
  }
        }
    }