首页 > 解决方案 > 如何在 Angular 2 中检索数据?

问题描述

我正在使用 post 方法。

这是我的ts文件:

viewt(testid)
{
    $('#myModal22').modal('show');
    var param2 = {
        testid:testid,
    }
    this.service.get_tquestion(param2).subscribe(data => {
        this.test_question1 = data;
        console.log(data);
        console.log(this.test_question1);
    });
}

还有HTML代码:

<ng-container *ngFor="let v of test_question1">
    <tr >
        <td>{{v.questionid}}</td>
        <td>{{v.questionname}}</td>
    </tr>
</ng-container>

和服务部分:

get_tquestion(param) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    // this.createAuthorizationHeader(headers);
    return this.http.post(
        this.base_url + "test/getquestion", param, {headers: headers })
        .map((res: Response) => res.json());
}

API响应是这样的:

找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables,例如 Arrays。

我得到的回应是:

{"Code":200,"Results":[{"questionid":1034,"questionname":"找出下面句子中的形容词。午餐我们带了几个三明治。(Hard)","duration":60 }]}

但我无法以 HTML 格式显示。

标签: angular

解决方案


您将整个响应从 API 传递给test_question1变量。由于 response 是一个对象并且它不是 Iterable ,因此您不能将它与ngFor指令一起使用。要解决此问题,您可以例如从服务返回数据数组:

return this.http.post(this.base_url + "test/getquestion", param, { headers: headers })
    .map((res: Response) => res.json().Results);}

或在订阅中分配响应对象的属性:

this.test_question1 = data.Results;

推荐阅读