Angular 6-JSON响应到HTML表中

Question

我有这个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');
}

如何将其显示到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>