如何将 JSON 数据加载到 Angular2 组件中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36749153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to I load JSON data into Angular2 component
提问by Beaker
After running through many tutorials on tinterweb I have finally started to try and build something useful to me using Angular2 and I have come across my first issue. I cannot seem to load JSON data into my service component.
在 tinterweb 上浏览了许多教程后，我终于开始尝试使用 Angular2 构建对我有用的东西，我遇到了我的第一个问题。我似乎无法将 JSON 数据加载到我的服务组件中。
my people.json file is stored in a folder called data in the top folder.
我的 people.json 文件存储在顶层文件夹中名为 data 的文件夹中。
people.json
人.json
"people":[
{ age: 40, name: "Jordan Houston" },
{ age: 38, name: "Robert Eastham" },
{ age: 23, name: "Josh Beh" },
{ age: 23, name: "Joseph Canina" },
{ age: 24, name: "Alexandra Wilkins" },
{ age: 22, name: "Kiersten Costanzo" },
{ age: 23, name: "Ku Sherwood" },
{ age: 25, name: "Arta Halili" },
{ age: 24, name: "Patrick Cooney" },
{ age: 23, name: "Z.A. Perr" },
{ age: 18, name: "Tyler Mulligan" },
{ age: 26, name: "Dennis Dempsey" },
{ age: 32, name: "Francis Yeager" },
{ age: 23, name: "Phil Belardi" }
]
I believe my issue lies in the friends.service.ts
我相信我的问题在于friends.service.ts
friend.service.ts
朋友服务.ts
import {Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
@Injectable()
export class FriendService {
friends:Array<any>;
constructor(private http:Http)
{
//console.log(">>friend.service.ts:constructor--")
http.request('./data/people.json')
.subscribe(response => this.friends = response.json()));
}
getFriends()
{
//console.log(">>friend.service.ts:getFriends--")
console.log(this.friends)
return this.friends
}
}
friend.service.ts is used within the friend.component.ts
在friend.component.ts 中使用friend.service.ts
friend.component.ts
朋友.component.ts
import { Component } from 'angular2/core';
import { FriendService } from 'app/friend.service';
@Component({
selector: 'my-friends',
providers: [FriendService],
styles: [`
div {
background-color:#EFEFEF;
margin-bottom:15px;
padding:15px;
border:1px solid #DDD;
box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.3);
border-radius:3px;
}
h2 {
text-align: center;
}
`],
template: `
<h1>Hello from the {{ componentName }}!</h1>
<div *ngFor="#f of friends">
<h3>Name: {{ f.name }}</h3>
<h4>Age: {{ f.age }}</h4>
</div>
`
})
export class FriendComponent {
componentName: 'FriendComponent';
constructor(private _friendService: FriendService)
{
this.friends = _friendService.getFriends();
}
}
this lives within main.ts
这存在于 main.ts 中
main.ts
主文件
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { FriendComponent } from 'app/friend.component';
import {HTTP_PROVIDERS} from 'angular2/http';
@Component({
selector: 'my-app',
directives: [FriendComponent],
styles: [`
h1 {
color:#545454;
background:#02A8F4;
padding:15px;
box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.3);
}
`]
template: `
<div>
<h1>Hello from the {{componentName}}.</h1>
<my-friends></my-friends>
</div>
`
})
export class AppComponent {
componentName: 'AppComponent'
}
bootstrap(AppComponent,[HTTP_PROVIDERS])
...and here is the index page...
...这是索引页...
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Add Bootstrap CSS Styles-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<!-- Angular polyfill required everywhere -->
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'api': {defaultExtension: 'ts'},
'app': {defaultExtension: 'ts'}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body class="container">
<my-app>Loading...</my-app>
</body>
</html>
Any help would be greatly appreciated ;)
任何帮助将不胜感激 ;）
回答by Thierry Templier
In fact, it's because your data are loaded asynchronously. So within the constructor of your component, you initially get an undefined value.
实际上，这是因为您的数据是异步加载的。因此，在组件的构造函数中，您最初会得到一个未定义的值。
constructor(private _friendService: FriendService) {
this.friends = _friendService.getFriends();
}
To keep your constructor like that, you need to refactor your code to make the getFriendsmethod of your service return an observable:
为了让你的构造函数保持这样，你需要重构你的代码，让getFriends你的服务方法返回一个可观察的：
@Injectable()
export class FriendService {
constructor(private http:Http) {
}
getFriends() {
return this.http.request('./data/people.json')
.map(res => res.json());
}
}
Then you can use the asyncpipe into your component template:
然后你可以在async你的组件模板中使用管道：
template: `
<h1>Hello from the {{ componentName }}!</h1>
<div *ngFor="#f of friends | async">
<h3>Name: {{ f.name }}</h3>
<h4>Age: {{ f.age }}</h4>
</div>
`
