Question

我有这个代码读取一些json数据：

import {Component} from 'angular2/core';
import {Http, Response} from 'angular2/http';

@Component({
    selector: 'my-app',
    template: `
      <h2>Basic Request</h2>
      <button type="button" (click)="makeRequest()">Make Request</button>
      <div *ngIf="loading">loading...</div>
      <pre>{{data | json}}</pre>

    `

})
export class AppComponent {

    data: Object;
    loading: boolean;

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

}

This is the returned json:

{
  "albumId": 1,
  "id": 1,
  "title": "accusamus beatae ad facilis cum similique qui sunt",
  "url": "http://placehold.it/600/92c952",
  "thumbnailUrl": "http://placehold.it/150/30ac17"
}

{{data | json}}正在返回所有数据。

我想以标题为例。所以我尝试了这个：

{{data.title | json}}但这不起作用。

显示标题的正确方法是什么？

Answer 1

像这样使用elvis运算符

<pre>{{data?.title}}</pre>

Elvis运算符（？）表示数据字段是可选的，如果未定义，则应忽略表达式的其余部分。

Answer 2

添加地图并切换到获取

   this.data = {}; //initialize to empty object
   this.http.get('http://jsonplaceholder.typicode.com/photos/1')
            .map((res: Response) => res.json())
            .subscribe(res => {
                this.data = res;
                this.loading = false;
            });

然后在模板中使用它{{data.title}}

以下是一些http示例：http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

Answer 3

数据是一个JSON对象，因此如果您使用数据，则使用 | json 管道。如果要使用不是Object的值，则只需直接使用该值

{{data.title}}

Answer 4

你可以试试这个

import numpy as np
array = list()
i = int(input("How many row: "))
j = int(input("How many column: "))


for x in range(i):
    if i <= 0 or i>10:
         print("Failure!")
         break
    elif j <= 0 or j>10:
         print("Failure!")
         break
    else:
        for y in range(j):
             num = raw_input("Value: ")
             array.append(int(num))


a = np.reshape(array,(i,j))
print a

您现在可以this._http.request('http://jsonplaceholder.typicode.com/photos/1' ) .map((res:Response) => res.json()) //add this line .subscribe( data => this.myData = data, this.loading = false; error =>this.logError(error), );

对于多个对象使用：ngFor like this

{{myData.title}}

Angular 2 HTTP显示JSON特定值

4 个答案: