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

Question

I just started building my backend in PHP laravel. What I'm doing is receiving data from a service and I'm trying to display it inside the view but errors.

dataservice.ts

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

Component

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

    });

DATA Structure from Service

{"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}}

The data needed want is found in result.data

When I do data.result.data an error displays Property 'result' does not exist on type 'Object'

HTML

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

Answer 1

You can do it as below.

ngOnInit() {

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

      this.userList = data.result.data;

    }); 
}