json - Angular 4 显示来自 HTTP Get 请求的 JSON 数据

Question

我有一个简单的 Angular 4 应用程序，它正在联系一个 HTTP REST 服务器，这个服务器只是返回一个 JSON 负载，我想在浏览器中显示这个 JSON 负载。这是我的 makeRequest typescript 函数:

import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';

@Component({
  selector: 'app-simple-http',
  templateUrl: './simple-http.component.html'
})
export class SimpleHttpComponent implements OnInit {
  data: string;
  loading: boolean;

  constructor(private http: Http) {
  }

  ngOnInit() {
  }

  makeRequest(): void {
    this.loading = true;
    this.http.request('http://jsonplaceholder.typicode.com/posts/1')
    .subscribe((res: Response) => {
      this.data = res.json();
      this.loading = false;
    });
  }
}

调用http://jsonplaceholder.typicode.com/posts/1返回以下 JSON:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

我现在在我的 html 组件中将其显示为:

<h2>Basic Request</h2>
<button type="button" (click)="makeRequest()">Make Request</button>
<div *ngIf="loading">loading...</div>
<pre>Data Obtained is: {{ data }}</pre>

但是在浏览器中，我看到了这个:

如何让我的 JSON 按原样显示？

Answer 1

您可以使用 json pipe .在您的模板中:

<pre>Data Obtained is: {{ data | json }}</pre>

此外，您还必须将 data 属性的类型更改为 any 而不是 string。