角-如何将接收到的JSON传递到html表？

Question

我有一个Range6项目，我收到了一个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())
   );
}

在你的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>