无法以角度 2 显示来自后端的 JSON 数据

Question

正在从后端（api）获取数据，但我无法将其显示到视图中。 我尝试了几种解决方案，但似乎没有用。

<ul>
    <li *ngFor="let item of data">
     <h4>{{item.address}}</h4>
     <h4>{{item.city}}</h4>
    </li>
</ul>        

数据粘贴在下面。 我使用 JSON.stringify() 将数据从对象转换为字符串并将其存储在变量 getEventData 中。 当我对这样的结果进行插值时{{getEventData}}它没问题但无法格式化它。 提前致谢。

//get request to api
        this._http.get( this.url + param, {headers:headers})
            .map((res:Response) => res.json())
            .subscribe(
                data => this.getEventData = JSON.stringify(data),
                error =>this.logError(error),
                () => console.log('get request completed sucesfully')
            );

来自api的数据

 {
    "data": [
        {
            "address": "Great 22", 
            "banner_image": null, 
            "city": "Kum", 
            "country": "", 
            "creator_id": 15, 
            "description": "50th congregation", 
            "end_time": "2016-07-05T15:30:00+00:00", 
            "event_id": 5, 
            "is_online": false, 
            "max_tickets_per_user": 1, 
            "show_id": 7, 
            "start_time": "2016-07-05T09:00:00+00:00", 
            "state": "Ash", 
            "title": "Graduation", 
            "venue": "Great Hall"
        }, 
        {
            "address": "CCB Auditorium", 
            "banner_image": null, 
            "city": "Kumasi", 
            "country": "hema", 
            "creator_id": 15, 
            "description": "school graduation", 
            "end_time": "2016-07-06T15:30:00+00:00", 
            "event_id": 5, 
            "is_online": false, 
            "max_tickets_per_user": 1, 
            "show_id": 8, 
            "start_time": "2016-07-06T09:00:00+00:00", 
            "state": "hama", 
            "title": "Graduation", 
            "venue": "CCB Auditorium"
        }, 
        {
            "address": "Engineering Auditorium", 
            "banner_image": null, 
            "city": "Kumasi", 
            "country": "Ghana", 
            "creator_id": 15, 
            "description": "KNUST graduation for the 50th congregation", 
            "end_time": "2016-07-06T15:30:00+00:00", 
            "event_id": 5, 
            "is_online": false, 
            "max_tickets_per_user": 1, 
            "show_id": 9, 
            "start_time": "2016-07-06T09:00:00+00:00", 
            "state": "Ash", 
            "title": "Graduation", 
            "venue": "Engineering Auditorium"
        }
    ]
}

Answer 1

你不需要JSON.stringify如果您打算渲染数据*ngFor ：

.subscribe(
    data => this.getEventData = data.data, // note extra .data
    error => this.logError(error),
    () => console.log('get request completed succesfully')
);