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

Question

我的网络服务返回如下所示的 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);

在角度6中我应该如何显示？

原文由 sasi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

TS

 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>

原文由 K. Ayoub 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Wannes Van Dorpe 发布，翻译遵循 CC BY-SA 4.0 许可协议