Winkel 4 Anzeige der JSON-Daten aus HTTP-Get-Anfrage

Habe ich eine einfache Winkel-4-Anwendung, die die Kontaktaufnahme mit einem HTTP-REST-server und dieser server ist einfach der RÜCKFÜHRUNG einer JSON-Nutzlast, und ich möchte, um dieses JSON-Nutzlast, wie in den browser. Dies ist mein makeRequest Typoskript Funktion:

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;
    });
  }
}

Den Aufruf http://jsonplaceholder.typicode.com/posts/1 gibt mir die folgende 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"
}

Ich jetzt diese Anzeige in meinem html-Komponente:

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

Aber im browser, ich sehe dies:

Wie mache ich mein JSON angezeigt wird?

InformationsquelleAutor sparkr | 2017-08-23