首页 文章

离子3，角度5 API集成

提问于
浏览 次
0

我正在尝试在我的新离子应用程序中包含一个API . 我正在使用使用Angularjs 5的Ionic 3.9.2 . 我对这些较新的更新没有任何经验 .

这包含在我的data.ts文件中（我的提供者）

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DataProvider {

   private url = "https://api.myjson.com/bins/opju3";

   constructor(public http: HttpClient) {
     console.log('Hello DataProvider test4');
   }

   getData(){
    return this.http.get(this.url)
    .subscribe(response => this.response = response.json());
   }

}

在我的home.ts文件中，我有这个代码

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
//import { Observable } from 'rxjs/Observable';
import { DataProvider } from '../../providers/data/data';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {



  constructor(public navCtrl: NavController, public dataProvider: 
DataProvider) {
    console.log("before.getData");

  }
  ionViewDidLoad(){
    this.dataProvider.getData();  
  }

}

值得注意的是，我在Cloud9 IDE中运行它，因此我没有最好的错误消息 . 当我今天运行时，我收到的错误是：

[16:17:43]  typescript: src/providers/data/data.ts, line: 16 
        Property 'response' does not exist on type 'DataProvider'. 

  L15:  return this.http.get(this.url)
  L16:  .subscribe(response => this.response = response.json());

  [16:17:43]  typescript: src/providers/data/data.ts, line: 16 
        Property 'json' does not exist on type 'Object'. 

  L15:  return this.http.get(this.url)
  L16:  .subscribe(response => this.response = response.json());

谢谢你们！

编辑：你们都完美地回答了我的问题 . 它现在正在顺利运作 . 非常感谢 .

angular api ionic3 angular5

2 回答

  • 1

    新的 HttpClient 默认格式化对JSON的响应所以我们不再需要使用_112722解析它，如果你想解析你的响应你应该使用 map 运算符，用于在你的json和它的情况下解析所需格式的响应返回一个可以订阅的观察者 . 例如：

    this.httpClient.get(this.url)
  .map(response => response.json())
  .subscribe(data=>console.log(data));

    但它不再需要了
    修改你的代码：data.ts

    import { Observable } from 'rxjs/Observable';
     getData():Observable<any>{
        return this.http.get(this.url);

       }

    home.ts

    ionViewDidLoad(){
    this.dataProvider.getData().subscribe(value=>{console.log(value);//your logic});  
  }
    回复于
  • 1

    关于 first error ：

    Property 'response' does not exist on type 'DataProvider'.

    您的 class DataProvider 中没有 response 属性 . 您可以解决它声明属性：

    @Injectable()
export class DataProvider {

   private url = "https://api.myjson.com/bins/opju3";
   private response: any;
   ...

    关于你的 second error ：

    Property 'json' does not exist on type 'Object'.

    Angular HttpClient 已经返回 the body of the response ，而不是 HttpResponse （除非您使用observe option） . 所以你不需要调用 response.json() ：

    .subscribe(response => this.response = response);

    我建议您从您的服务中返回observable并在您的页面中订阅它，就像在answer from @Vikas中一样 .

    回复于

相关问题