如何在Angular 2中检索数据?

时间:2018-09-10 09:33:28

标签: angular

我正在使用发布方法。

这是我的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响应是这样的:

  

找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

响应我得到的是:

  

{“代码”:200,“结果”:[{“ questionid”:1034,“ questionname”:“在下面的句子中标识形容词。我们为午餐携带了一些三明治。(硬)”,“持续时间” “:60}]}

但是我无法显示HTML。

2 个答案:

答案 0 :(得分:3)

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

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

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

this.test_question1 = data.Results;

答案 1 :(得分:0)

您应该尝试一下,为我工作:

在您的服务中。ts

import { Injectable } from '@angular/core';
import { URLSearchParams, Http, HttpModule, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class AuthService {
constructor(private http: Http) { }

authenticate(user_creds)
{
  //console.log(user_creds);
  const header = new Headers();
  header.append('Content-Type', 'application/x-www-form-urlencoded');
  return this.http.post('http://localhost/valuesassessment/api/login/authenticate_login', user_creds, { headers: header })
    .map((res: Response) => res.json());
}
}

在您的.ts中:

import { AuthService } from '../auth.service';

export class LoginComponent implements OnInit {
    session_data: any = {};
constructor( private authService: AuthService ) 
{ 
  // your logic before init
}

authenticate(x)
{
    this.authService.authenticate(x)
                    .subscribe(data => 
                    {
                      if(data.ResponseCode == 411)
                      {
                        // console.log(data.ResponseCode)
                        this.session_data = data;
                      }
                      else
                      {
                        this.session_data = data;
                        // console.log(this.session_data);
                      }
                    })
    this.session.store('header',this.header);
}

请注意,在将响应分配给session_data之前,我们已将其初始化为类型any

希望这会有所帮助。