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

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

1 个答案: