如何使用Http类在Angular 2中获取json文件? [英] How to get a json file in Angular 2 using the Http class?
问题描述
我试图使用Angular 2中的Http类获取json文件.我按照Angular 2主页上的示例进行操作:
I am trying to get a json file using the Http class in Angular 2. I followed the example on the Angular 2 homepage: https://angular.io/docs/js/latest/api/http/Http-class.html. However, I am getting the error message below. I am using Angular 2.0.0-alpha.37, traceur 0.0.91, systemjs 0.16.11, es6-module-loader 0.16.6 and typescript 1.6.2. Any ideas on what might be wrong here?
app.ts
///<reference path="typings/angular2/angular2.d.ts"/>
///<reference path="typings/angular2/http.d.ts"/>
import {Component, View, bootstrap} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http';
@Component({
selector: 'myApp',
viewBindings: [HTTP_BINDINGS]
})
@View({
templateUrl: 'myapp.html'
})
class MyComponent {
data: Object;
constructor(http: Http) {
http.get('data.json').toRx().map(res => res.json()).subscribe(data => this.data = data);
}
}
bootstrap(MyComponent);
index.html
<!DOCTYPE html>
<html>
<head>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script src="../node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
</head>
<body>
<myApp></myApp>
<script>
System.import('app');
</script>
</body>
</html>
结果
EXCEPTION: Error during instantiation of MyComponent!.
EXCEPTION: Error during instantiation of MyComponent!.
ORIGINAL EXCEPTION: TypeError: Rx.Subject is not a function
ORIGINAL STACKTRACE:
TypeError: Rx.Subject is not a function
at new EventEmitter (angular2.dev.js:22672)
at new XHRConnection (http.dev.js:7474)
at XHRBackend.createConnection (http.dev.js:7519)
at httpRequest (http.dev.js:7291)
at Http.get (http.dev.js:7369)
at new MyComponent (:8080/src/app.js:19)
at angular2.dev.js:8937
at Injector._proto._instantiate (angular2.dev.js:28045)
at Injector._proto._new (angular2.dev.js:27985)
at InjectorInlineStrategy.protoStrategy.instantiateBinding (angular2.dev.js:27774)
ERROR CONTEXT:
_Context
EXCEPTION: TypeError: Cannot read property 'location' of undefined
EXCEPTION: TypeError: Cannot read property 'location' of undefined
STACKTRACE:
TypeError: Cannot read property 'location' of undefined
at angular2.dev.js:27298
at Zone.run (angular2.dev.js:136)
at Zone.run (angular2.dev.js:16593)
at zoneBoundFn (angular2.dev.js:109)
at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1419)
at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1431)
at lib$es6$promise$$internal$$publish (angular2.dev.js:1402)
at angular2.dev.js:187
at microtask (angular2.dev.js:16619)
at Zone.run (angular2.dev.js:136)
EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
STACKTRACE:
TypeError: Cannot read property 'hostView' of undefined
at zone.run.tick (angular2.dev.js:27331)
at Zone.run (angular2.dev.js:136)
at Zone.run (angular2.dev.js:16593)
at zoneBoundFn (angular2.dev.js:109)
at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1419)
at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1431)
at lib$es6$promise$$internal$$publish (angular2.dev.js:1402)
at angular2.dev.js:187
at microtask (angular2.dev.js:16619)
at Zone.run (angular2.dev.js:136)
推荐答案
已更新为angular2 Beta
由于Angular2现在处于beta中，所以我觉得可以根据angular2 beta进行一些更改来回答这个问题. 因此，这是必须遵循的一些更改的列表:
Updated to angular2 Beta
As of Angular2 is in beta now so i feel to answer this question with some changes according to angular2 beta. so here is the list of some changes which is must to follow :
- angular2的进口
此
import {Component, View, bootstrap} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http';
应更改为:
import {Component, View} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';
有关进口的更多信息，请参见此处 截至beta版本的angular2中所有导入的列表.
for more information regarding imports see here List of all imports in angular2 as of beta.
-
viewBindings:[HTTP_BINDINGS]:-
HTTP_BINDINGS更改为HTTP_PROVIDERS. 最好在引导应用程序时提供所有基本绑定.像这样
viewBindings: [HTTP_BINDINGS] :-
HTTP_BINDINGSis changed toHTTP_PROVIDERS. It would be better if we provide all basic binding at the time of bootstraping our app.like this
bootstrap(MyComponent，[HTTP_PROVIDERS]);
bootstrap(MyComponent,[HTTP_PROVIDERS]);
@Component本身提供的所有功能时，无需提供额外的@View批注.忽略这个:
No need to provide extra @View annotation while all the functionality provided by @Component itself. ignore this:
@View({
templateUrl: 'myapp.html'
})
使用此:
@Component({
selector: 'myApp',
templateUrl: 'myapp.html'
})
-
使用HTTP获取JSON文件.
首先，众所周知，Angular2是抛出了可观察对象，而不是像在1.x中那样应许.因此要处理可观察对象，我们需要RxJs方法，即.map and .subscribe..map方法接受Observable对象，并根据需要将其转换为我们所需的形式，如text()，Json()，请在此处阅读
Get JSON file using HTTP .
Firstly as we all know Angular2 is throw observable object instead of promise like in angular 1.x. so to handle Observable Object we needRxJsmethods i.e.map and .subscribe..mapmethod accepts Observable object and transform into our desired form like text(), Json() as per need read out here https://angular.io/docs/js/latest/api/http/Response-class.html .
class MyComponent {
data: Object;
constructor(private http: Http) {
http.get('data.json')
.map(res => res.json())
.subscribe(data => this.data = data,
err => console.log(err),
() => console.log('Completed'));
}
}
有关Angular2中HTTP服务的更多信息，请读出这些答案.
for More Information regarding HTTP service in Angular2 read out these answers too.
- Using http rest apis with angular 2
- Angular 2: How to use/import the http module?
这篇关于如何使用Http类在Angular 2中获取json文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
