angular2从服务中打印json
Posted
技术标签:
【中文标题】angular2从服务中打印json【英文标题】：angular2 print json from service 【发布时间】：2016-05-16 13:11:55 【问题描述】：我不知道如何从我的模板中打印的 JSON 中获取数据
如果我在模板中使用：
模板：people: people 或模板：people: articles
总是进入浏览器：
人：[对象对象]
如果我在模板中使用：
模板：people: people.totalrecords 或模板：people: articlestotalrecords
获取空白值： 人：
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>
【问题讨论】：
【参考方案1】：如果你想看json，你只需要这样做：
people: people | json
【讨论】：
【参考方案2】：我猜你需要
people?.totalrecords
让它工作。
您在 Angular 呈现视图之前获取数据，但响应可能在之后到达。
?. 角度不计算 .totalrecords 而 people 为空。
【讨论】：
谢谢！所以我必须始终使用安全性？在我的模板中？如果我没有值怎么办，我可以使用 ?totalrecords 吗，谢谢！ 当people 是undefined 或null people.totalrecords 时抛出，因为null 没有totalrecords 属性。当前面的部分可以变为undefined 或null 时，您只需要?.。如果将初始值分配给people（例如在构造函数中），则不需要.?。否则，people 在来自服务器的值到达之前是未定义的。 people?.totalrecords 是 people ? people.totalrecords : null 的简写形式【参考方案3】：
如果你想要更优雅的东西，你可以使用 HTML <pre> 标签：
<pre> people | json </pre>
【讨论】：
以上是关于angular2从服务中打印json的主要内容，如果未能解决你的问题，请参考以下文章
如何从 rxjs 流中过滤单个值以在 Angular 2 组件中打印
使用angular2将HTML从服务器插入DOM（Angular2中的一般DOM操作）[重复]
将服务从 Angular2 重写为 Angular6 “模块‘AppModule’声明的意外模块‘HttpClientModule’