typescript angular2 从服务打印 json
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35243119/
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
angular2 print json from service
提问by stackdave
I don't know how to get the data from JSON printed in my template
我不知道如何从模板中打印的 JSON 中获取数据
if i use in template:
template: people: {{people}}or template: people: {{articles}}
always get in the browser:
如果我在模板中使用：模板：people: {{people}}或模板：people: {{articles}}
总是进入浏览器：
people: [object Object]
人：[对象对象]
if i use in template:
template: people: {{people.totalrecords}}or template: people: {{articlestotalrecords}}
如果我在模板中使用：模板：people: {{people.totalrecords}}或模板：people: {{articlestotalrecords}}
in get blank value: people:
在获取空白值：人：
import {bootstrap} from 'angular2/platform/browser';
import {Component, enableProdMode, Injectable, OnInit} from 'angular2/core';
import {Http, HTTP_PROVIDERS, URLSearchParams} from 'angular2/http';
import 'rxjs/add/operator/map';
import {enableProdMode} from 'angular2/core';
@Injectable()
class ArticleApi {
constructor(private http: Http) {}
getData: string;
seachArticle(query) {
const endpoint = 'http://xdemocrm.com/webservicecrm.php';
const searchParams = new URLSearchParams()
searchParams.set('object', 'account');
searchParams.set('action', 'list');
return this.http
.get(endpoint, {search: searchParams})
.map(res => res.json())
}
postExample(someData) {
return this.http
.post('https://yourEndpoint', JSON.stringify(someData))
.map(res => res.json());
}
}
@Component({
selector: 'app',
template: `people: {{people}}`,
providers: [HTTP_PROVIDERS, ArticleApi],
})
class App implements OnInit {
public people;
constructor(private articleApi: ArticleApi) { }
public articles: Array<any> = [];
ngOnInit() {
this.articles = this.articleApi.seachArticle('obama')
.subscribe (data => this.people = data)
}
}
bootstrap(App)
.catch(err => console.error(err));
<!DOCTYPE html>
<html>
<head>
<title>angular2 http exmaple</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/http.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app>loading...</app>
</body>
</html>
回答by pixelbits
If you want to see json, you just need to do this:
如果你想看到json，你只需要这样做：
people: {{people | json}}
回答by Günter Z?chbauer
I guess you need
我想你需要
{{people?.totalrecords}}
to make it work.
使其工作。
You fetch the data before Angular renders the view, but the response probably arrives afterwards.
您在 Angular 呈现视图之前获取数据，但响应可能在之后到达。
With ?.angular doesn't evaluate .totalrecordswhile peopleis null.
随着?.角度不评估.totalrecords，同时people为空。
回答by Melchia
If you want something more elegant you can use the HTML <pre>Tag:
如果你想要更优雅的东西，你可以使用 HTML<pre>标签：
<pre> {{people | json}} </pre>
