将php laravel中的远程数据绑定到有角度的前端

时间:2019-07-02 12:28:49

标签: php angular laravel

我刚刚开始用PHP laravel构建后端。我正在做的是从服务中接收数据,并且试图在视图中显示它,但出现错误。

dataservice.ts

getData() {
  const headers = this.getHeaders();
  const list = this.http.post('tespapi/data', {
    pageSize: 10,
    page: 1
  },{headers});
  return list.pipe(tap(_ => {
  }));
}

组件

ngOnInit() {
    this.callServices.testCall().subscribe( data => {
      this.userList = data.result.data;

    });

服务中的数据结构

{"status":"ok","code":200,"message":"Names retrieved successfully","result":{"current_page":1,"data":[{"id":32,"fullname":"Larson King","description":null,"category":{"id":12,"name":"Purple"},"unit":{"id":12,"name":"group"},"status":{"id":2,"name":"maximum level"}}],"first_page_url":"http://sample.apitest/view?page=1","from":1,"last_page":3,"last_page_url":"http://http://sample.apitest/view?page=3","next_page_url":"http://sample.apitest/view?page=2","path":"http://sample.apitest/view","per_page":1,"prev_page_url":null,"to":1,"total":3}}

所需的数据可以在result.data

中找到

当我做data.result.data时,会显示错误Property 'result' does not exist on type 'Object'

HTML

<div *ngFor="let item of userList">
{{item.fullname}} - {{item.descripition}}
</div>

1 个答案:

答案 0 :(得分:0)

您可以按照以下步骤进行操作。

ngOnInit() {

    this.callServices.testCall().subscribe( (data: any) => {

      this.userList = data.result.data;

    }); 
}