Angular 6-如何将接收到的JSON传递到html表中？

Question

我有一个Angular 6项目，我收到一个JSON对象，如下所示：

现在我想将其注入/传递到html表格上。这是我的代码：

接口

interface Ilivelog {
  instID: string;
  procID: string;
  threadNum: string;
  status: string;
}

对象

dataAgent: Ilivelog;

方法

onGetAgent() {
  this.backend.getAgentStatus().subscribe(
    (response: Response) => {
      this.dataAgent = response.json();
      console.log("Arrey Agent: " + this.dataAgent);
    },
    (error) => {
      console.log(error)
    }
  )
}

我如何获取数据

getAgentStatus() {
  return this.http.get('http://localhost:8081/rms_agent/status');
}

如何将这个json传递到HTML表中？

Answer 1

首先检查JSON在验证器中是否有效。

Answer 2

在组件模板中尝试一下：

<table border="1">
  <thead>
    <td>instID</td>
    <td>procID</td>
    <td>threadNum</td>
    <td>status</td>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataAgent">
      <td>{{item.instID}}</td>
      <td>{{item.procID}}</td>
      <td>{{item.threadNum}}</td>
      <td>{{item.status}}</td>
    </tr>
  </tbody>
</table>

这里是Sample StackBlitz供您参考。

Answer 3

在您的component.ts中：

results$: Observable<Ilivelog[]>;
ngOnInit() {
   this.result$ = this.backend.getAgentStatus().pipe(
        map(res => res.json())
   );
}

in your view.html

<table>
    <tr *ngFor="let log of (results$ | async)">
       <td>log.instID</td>
       <td>log.procID</td>
       <td>log.threadNum</td>
       <td>log.status</td>
    </tr>
</table>