Angular 4 显示来自 HTTP Get 请求的 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45838538/
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
Angular 4 Display JSON Data from HTTP Get Request
提问by sparkr
I have a simple Angular 4 application which is contacting a HTTP REST server and this server is simply returning a JSON payload and I would like to display this JSON payload as is in the browser. This is my makeRequest typescript function:
我有一个简单的 Angular 4 应用程序，它正在联系一个 HTTP REST 服务器，这个服务器只是返回一个 JSON 负载，我想在浏览器中显示这个 JSON 负载。这是我的 makeRequest 打字稿功能：
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;
});
}
}
The call to http://jsonplaceholder.typicode.com/posts/1returns me the following JSON:
对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"
}
I now display this in my html component as:
我现在在我的 html 组件中显示为：
<h2>Basic Request</h2>
<button type="button" (click)="makeRequest()">Make Request</button>
<div *ngIf="loading">loading...</div>
<pre>Data Obtained is: {{ data }}</pre>
But in the browser, I see this:
但是在浏览器中，我看到了这个：
How do I make my JSON displayed as is?
如何让我的 JSON 按原样显示？
回答by Andrei Matracaru
回答by Pablo Lozano
You have two options:
您有两个选择：
Use the built-in pipe JsonPipe (
this.datashould be of typeany):<pre>Data Obtained is: {{ data | json }}</pre>Get the JSON string manually:
this.data = JSON.stringify(res.json()); //data is a string :)or
<pre>Data Obtained is: {{ JSON.stringify(data) }}</pre>
使用内置管道 JsonPipe （
this.data应该是 typeany）：<pre>Data Obtained is: {{ data | json }}</pre>手动获取 JSON 字符串：
this.data = JSON.stringify(res.json()); //data is a string :)或者
<pre>Data Obtained is: {{ JSON.stringify(data) }}</pre>
You have to understand that any value in a template is shown via calling its .toString()method, so a basic object (something like {key: value}) just shows [object Object]
您必须了解模板中的任何值都是通过调用其.toString()方法来显示的，因此一个基本对象（例如{key: value}）只显示[object Object]
Here you have a working demo, check the app.ts file, the ajax call and the template with the json pipe is there.
这里有一个工作演示，检查 app.ts 文件、ajax 调用和带有 json 管道的模板。
