如何使用 Angular 6 在 html 中显示动态 json 数据？答案

【问题标题】：How to display dynamic json data in html using angular 6?如何使用 Angular 6 在 html 中显示动态 json 数据？
【发布时间】：2019-01-14 02:00:31
【问题描述】：

我的 web 服务返回一个 json 数据，如下所示。

 [{ "Key" : 001,
   "Record" : {"id":"001",
                "name" : "qwerty"}
 },
 { "Key" : 003,
   "Record" : {"id":"003",
                "name" : "asdfg"}
 }]

现在我需要以表格格式显示它。通常在 jquery 中，我使用动态创建表并将 div id 分配给表，然后将其替换为动态创建的表。

我的组件.ts：

 export class CatComponent extends Lifecycle {

constructor(
    private $modal: $ModalManagerService,
    private http: HttpClient
) {
    super();
}

_initialize(): void {
        this.http.get('http://127.0.0.1:3000/query/aa',{responseType:"json"}).subscribe(
   response => {
     console.log("data :"+response);
     var sample=JSON.stringify(response);
     });
}

}

$("#divv").html(content);

在 Angular 6 中我应该如何显示？

【问题讨论】：

你可以使用<div id="divv" [innerHTML]='content'></div>
在html文件中使用*ngFor可以在表格中显示数组数据。
在打字稿代码中生成表格不是一个好习惯。
@Sujata Chanda 你想让我在 html 中使用这一行吗？
是的。如果要在 ts 文件中生成内容，则可以使用上面的 html 创建表。但由于它是 Angular，因此最好像下面的答案一样在 html 中创建整个表格。

标签： html angular angular6

【解决方案1】：

export class CatComponent extends OnInit{
public data: any;

    constructor(
        private $modal: $ModalManagerService,
        private http: HttpClient

    ) {
        super();
    }

    ngOnInit(): void {
        this.http.get('http://127.0.0.1:3000/query/aa',{responseType:"json"}).subscribe(
        response => {
            this.data = response;
            console.log("data :"+response);
            var sample=JSON.stringify(response);
       });
    }
}

HTML

<table>
  <thead>
    <tr>
      <td>Key</td>
      <td>ID</td>
      <td>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor ="let d of data;">
      <td>{{d.Key}}</td>
      <td>{{d.Record.id}}</td>
      <td>{{d.Record.name}}</td>
    </tr>
  </tbody>
</table>

【讨论】：

非常感谢。但是如果我们声明公共数据：任何；在构造函数之外它正在工作。你是救命稻草。谢谢

【解决方案2】：

您应该将表格布局放在您的 html 模板中，并且只将获取和分配数据的逻辑放在您的打字稿代码中。
HTML 模板：

<table>
  <thead>
    <tr>
      <td>Key</td>
      <td>Record Id</td>
      <td>Record Name</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of content">
      <td>{{item.Key}}</td>
      <td>{{item.Record.id}}</td>
      <td>{{item.Record.name}}</td>
    </tr>
  </tbody>
</table>

【讨论】：

非常感谢您的回复。但我仍然无法在表格中看到我的数据。我也没有错误。

【解决方案3】：

你可以使用 ngFor 指令在你的表中动态加载 JSON 数据 .component.html

<table >
  <thead>
    <tr>
      <td>Key</td>
      <td>ID</td>
      <td>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor ="let data of sample;">
      <td>{{data.Key}}</td>
      <td>{{data.Record.id}}</td>
      <td>{{data.Record.name}}</td>
    </tr>
  </tbody>
</table>

*.component.ts

sample:any= [{ "Key" : "001",
  "Record" : {"id":"001",
               "name" : "qwerty"}
},
{ "Key" : "003",
  "Record" : {"id":"003",
               "name" : "asdfg"}
}];

【讨论】：

非常感谢您的回复。但我仍然无法在表格中看到我的数据。我也没有错误。
你能分享你的 *.ts 文件吗？
Kumar 我已经更新了我的组件文件。以前我试图在那里生成一个表，但是按照你的例子我刚刚删除了它。
在构造函数上方声明您的示例变量，例如 sample:any;或给出它将起作用的相关类型
您能告诉我吗？我已经声明了 sample:any = {}; ，我收到此错误消息：“找不到不同的支持对象 '[object object] of type object。