无法将JSON数组转换为HTML动态表，并且在Angular JS中使用打字稿显示空白

Question

我只是用谷歌搜索，发现了很多资源可以将动态数据添加到HTML文件中，但是我应用了大多数资源，但到目前为止没有任何帮助。

我刚刚在app.component.html文件中添加了以下几行。我可以在html页面上看到标题，但找不到值，它显示为空白，并且在chrome控制台页面中未找到任何错误消息。

app.component.html：

<table width="100%" class="table">
  <thead>
     <tr>
      <th> Product Name</th>
      <th> API Name </th>
      <th>Message</th>
     </tr>
  </thead>
  <tbody>
     <tr *ngFor="let binary of data">
       <td>{{binary.productName}}</td>
       <td>{{binary.apiName}}</td>
       <td>{{binary.message}}</td>
     </tr>
  </tbody>
   </table>

app.component.ts：

 getById():void {
    const url:any = "http://localhost:8081/api/products?productId=23421342221";       
    this.http.get(url).subscribe(data =>{ 
        console.log(data);
    });  
  }

上面的代码在控制台中输出适当的值，如下所示：

示例JSON数组如下所示（虚拟JSON模型）：

{
 "dataSet":[
            { 
              "productName": "mobile", 
              "apiName":"Android",
              "message":"Its android mobile device and model is sony m5"
            },
            {
              "productName": "Laptop", 
              "apiName":"Linux",
              "message":"It's linux OS and kernel version is <XXX>"
            }
         ]
 }

有人可以帮我了解我在代码中遗漏的内容以及为什么它没有显示出来。如果您能帮助我理解逻辑，那将非常好，这样对以后的参考非常有用。

提前感谢。

Answer 1

尝试这样

将数据属性声明为数组。

public data: Array<any> = [];

public getById():void {
    const url:any = "http://localhost:8081/api/products?productId=23421342221";       
    this.http.get(url).subscribe((data:any)=>{ 
        this.data = data.dataSet;
    });  
  }

Answer 2

您需要访问dataSet的data

数组

将您的代码更改为

this.http.get(url).subscribe(data =>{ 
       this.data = data.dataSet;
});