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

Question

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

打字稿class:

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：属性 'data' 在类型 'IBiodatas[]'.[= 上不存在19=]

Answer 1

你可以这样试试：

<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>

Answer 2

试试这个：

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>

Answer 3

getDetail(){

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

}

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

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

user-interface

observers

typescript

angular