如何在通过 API 的 .TS 调用获得的 Angular 7 应用程序的 HTML 中显示以下数据表答案

【问题标题】：How to display Table of following data Table in HTML of Angular 7 Application obtained through through .TS call from API如何在通过 API 的 .TS 调用获得的 Angular 7 应用程序的 HTML 中显示以下数据表
【发布时间】：2020-04-16 16:10:53
【问题描述】：

在 Angular 7 应用程序中，我试图从 API 调用中获取表格数据并将其分配给 HTML 元素。在此处添加了以下代码。我能够在调用代码的内括号中记录数据，但数据不可用。我无法将它分配给任何 HTML 元素。

打字稿类：

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

Typescript 服务调用：

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

Typescript 组件代码：

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);
        },
      );
  }

从 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

src/app/app.component.ts(30,41) 中的错误：错误 TS2339：“IBiodatas[]”类型上不存在属性“数据”。

【问题讨论】：

标签： angular typescript user-interface observers

【解决方案1】：

getDetail(){

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

}

【讨论】：

请补充说明

【解决方案2】：

你可以这样试试：

<table>
   <tr>
      <th>UserId</th>
      <th>Name</th>
   </tr>
   <tr *ngFor="let data of data.Table">
      <td>{{data.UserId}}</td>
      <td>{{data.Name}}</td>
   </tr>
</table>

【讨论】：

【解决方案3】：

试试这个：

this.data = JSON.stringify(res); 而不是只使用this.data = res.data.table

<table>
   <tr>
      <th>UserId</th>
      <th>Name</th>
   </tr>
   <tr *ngFor="let d of data">
      <td>{{d.UserId}}</td>
      <td>{{d.Name}}</td>
   </tr>
</table>

【讨论】：