Question

嗨，我在尝试使用angular2将从我的API调用接收到的数据显示到HTML表中时遇到问题。

我正在尝试在表格中显示从后端收到的每个组的名称。

从控制台日志中，我可以看到我的数据采用以下格式：

{
    "list":[
        {"group_uuid":"26750058-eda0-448b-a4ff-bedf5f7c70e1","name":"Group 2","description":null}, 
        {"group_uuid":"2f95cebc-7cc2-4c31-bc05-75890e8fee35","name":"group 6","description":null},
        {"group_uuid":"3eb5a9f6-4ad7-4757-a0f7- f533bbcbcece","name":"Group1","description":null}
    ]
}

基于其他答案，我已经尝试过：

<tr *ngFor="let item of grouplist.list">  
    <td>{{item.name}}</td>
</tr>

^上面说“找不到列表”是错误。

如果我尝试：

<tr *ngFor="let item of grouplist">  
   <td>{{item}}</td>
</tr>

它一次将原始JSON数据打印在表中，仅此而已（看起来与控制台日志相同）。

有什么建议吗？

Answer 1

您必须将string解析为Object。为此，请使用JSON.parse()

我离开了working StackBlitz

Answer 2

如果在接收时使用 Http模块，则必须调用 JSON.Pars（）;

在服务文件中：

  // HttpModule
   getRequest(url): Observable<any> {
     return this.http.get(url).map(this.extractData);
  }

   private extractData(response: Response) {
      const body = response.json();
      return body.data || {};
   }

如果您使用的是Http Client Module，则无需调用 JSON.Pars（）;

  // Http Clinet Module
  getRequest(url: string): Observable<any> {
    return this.http.get(url);
  }

例如：

export interface Instance {
    group_uuid: string;
    name: string;
    description: string;
}

在您的组件中

 groupList: Instance[] = [];
 ngOnInit(): void {
    this.YOURSERVICENAME.getRequest(URL)
     .subscribe(response =>  {
        this.groupList = response.list as Instance[];
     }, error => {
       alert('error');
     });
 }

在您的component.html

中

<table>
  <tr *ngFor="let item of groupList">
    <td>
     {{item.group_uuid}}
    </td>
    <td>
     {{item.name}}
    </td>
    <td>
     {{item.description}}
    </td>
  </tr>
</table>

在angular2表中显示后端数据库数据

2 个答案: