angular2从服务中打印json答案

【问题标题】：angular2 print json from serviceangular2从服务中打印json
【发布时间】：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>

【问题讨论】：

标签： json angular typescript

【解决方案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>

【讨论】：