Angular2无法显示json响应

时间:2017-01-26 19:23:56

标签: json angular

在角度2模板中,我无法显示来自json响应的数据:

{
  "success": true,
  "data": {
    "id": 5,
    "user_id": 1,
    "category_id": 1,
    "title": "ghfjhgf",
    "body": "jhgfjhgf",
    "created": "2017-01-19T18:22:02+00:00",
    "modified": "2017-01-19T18:22:02+00:00",
    "file": null,
    "column_9": null,
    "category": {
      "id": 1,
      "name": "Running",
      "body": "Regroupe toutes les traces relative à la course à pied."
    },
    "user": {
      "id": 1,
      "email": "user@local.ch",
      "username": "user",
      "role": "user",
      "active": true,
      "created": "2017-01-15T16:21:44+00:00",
      "modified": "2017-01-15T16:21:44+00:00"
    }
  }
}

当我尝试track.success时没有问题,它显示为true,但是当我尝试使用以下任何一项显示数据的id时:

track.data.id
track['data'].id
track['data']['id']

我有一个未定义的属性。我需要帮助。提前谢谢。

这是{{track | json}}

{
  "success": true,
  "data": {
    "id": 6,
    "user_id": 1,
    "category_id": 1,
    "title": "dsfasd",
    "body": "afdasf",
    "created": "2017-01-19T18:27:26+00:00",
    "modified": "2017-01-19T18:27:26+00:00",
    "file": null,
    "column_9": null,
    "category": {
      "id": 1,
      "name": "Running",
      "body": "Regroupe toutes les traces relative à la course à pied."
    },
    "user": {
      "id": 1,
      "email": "user@local.ch",
      "username": "user",
      "role": "user",
      "active": true,
      "created": "2017-01-15T16:21:44+00:00",
      "modified": "2017-01-15T16:21:44+00:00"
    }
  }

这是我的服务:

view(id):Observable<any> {
        return this.http.get('http://cake/api/tracks/' + id + '.json')
            .map(response => response.json());
    }

我的组件:

ngOnInit() {

        this.sub = this.route.params.subscribe((params: Params) => {
            this.id = +params['id'];
        })
        this.trackService.view(this.id).subscribe(track => this.track = track);
    }

1 个答案:

答案 0 :(得分:1)

当您想要显示对象

的内部属性时,应使用安全导航(Elvis)运算符
track['data']?.id
track?.data?.id

或者使用json管道以json格式显示所有数据。

track?.data | json
track | json