How to display Table of following data Table in HTML of Angular 7 Application obtained through through .TS call from API

Question

In Angular 7 application, I was trying to get the tabular data from API call and assign the same to the HTML elements. added the following code here. I was able to log the data in the inner parenthesis of call code but the data was not available out of it. I am not able to assign it to any HTML element.

Typescript class:

export class IBiodatas{
    CompanyId:number;
    EmpCode: string;
    ImageURL: string;
    Name: string;
    UserId : number;
}

Typescript service call :

getDetail(userName):Observable<IBiodatas[]>{
  return this.http.get<IBiodatas[]>(this.API_URL + userName,this.httpOptions).pipe(
    catchError(this.handleError('getDetail',[]))
  )
}

Typescript component code :

heroes: IBiodatas[];

getDetail(): void {
    this.biodataService.getDetail('?userName=Santosh')
      .subscribe(      
        data=> {
          this.heroes = Array.of(data.data.Table[0]);//Error: Property 'data' does not exist on type 'IBiodatas[]'.
          console.log('456456',this.heroes);
        },
      );
  }

Received data from API :

{
"APIExecutionTime":"0 sec(s) to execute the function",
"data":{
    "Table":[{
    "UserId":654,
    "ImageURL":"654.png",
    "Name":"Santosh Pal",
    "CompanyId":78,"EmpCode":"987"
    }]},
"httpStatusCode":200,
"msg":"OK",
"IsValid":true
}
how to get data.Table[0] and assign to class property

ERROR in src/app/app.component.ts(30,41): error TS2339: Property 'data' does not exist on type 'IBiodatas[]'.

Answer 1

getDetail(){

this.biodataService.getDetail('?userName=Santosh').subscribe
(data =>{
    this.heroes1 = Array.of(data)
    this.heroes = Array.of(this.heroes1[0].data.Table[0]);
});

}