离子3，角5 API集成
我正在尝试在我的新的离子应用程序中包含一个API。我使用的是Ionic 3.9.2，它使用Angularjs 5，我对这些更新没有任何经验。
这包括在我的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());谢谢大家！
编辑:你们都完美地回答了我的问题。它现在运转顺利。非常感谢。
回答 2
Stack Overflow用户
发布于 2018-04-19 18:05:48
默认情况下，新的HttpClient将响应格式化为JSON，因此我们不再需要使用response.json():解析它，如果您想解析您的响应，您应该使用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});
}Stack Overflow用户
发布于 2018-04-19 18:41:52
关于第一错误
Property 'response' does not exist on type 'DataProvider'.在类response中没有DataProvider属性。您可以解决它声明属性：
@Injectable()
export class DataProvider {
private url = "https://api.myjson.com/bins/opju3";
private response: any;
...关于您的第二个错误
Property 'json' does not exist on type 'Object'.角HttpClient已经返回响应的主体，而不是HttpResponse (除非使用观察选项)。所以你不需要打电话给response.json()
.subscribe(response => this.response = response);我建议您返回您的服务中可观察到的内容，并在您的页面中订阅它，就像在@Vikas的答复中那样。
https://stackoverflow.com/questions/49925810
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号