如何从angular中的响应数据初始化对象数组？

我有一个服务器端脚本，它通过多线程将传感器数据收集到数据库中。在前端，我有一个非常简单的角度页面，在这里我想用图形显示这些数据。我的计划是在服务器端获取测量传感器信息的活动模块。对此的响应示例如下所示：

[
{
    "id": 1,
    "name": "CPU Usage",
    "frequency": 5,
    "unit": "%"
},
{
    "id": 2,
    "name": "Memory Usage",
    "frequency": 4,
    "unit": "GB"
}
]

然后我想创建两个可以随时间更新的图表。这是我试图用来设置图表的代码：

export class DashboardComponent implements OnInit {
  public charts: [];
  constructor(private httpClient: HttpClient, private dataService: ApiService) { }

  ngOnInit(): void {
    this.httpClient.get<any>(this.dataService.baseUrl + '/measurable/active').subscribe({
      next: data => {
        console.debug(data);
        data.forEach(function (item, charts) {
          // let charts = [];
          document.getElementById('charts').innerHTML
            += '<label>' + item.name + '(' + item.unit + ')' + '</label>'
            + '<canvas id="chart' + item.id + '" style="width:100%; height:200px" width="1262" height="200"></canvas>';

          let newCharts = new SmoothieChart();
          newCharts.streamTo(document.getElementById('chart' + item.id));

          charts.push(newCharts);
        });
      },
      error: error => {
        console.error('Could not load any measurable', error.message);
      }
    })
    console.debug(this.charts);
  }
}

导出类仪表板组件实现OnInit{
公共海图：[]；
构造函数（私有httpClient:httpClient，私有dataService:ApiService）{}
ngOnInit（）：void{
this.httpClient.get（this.dataService.baseUrl+'/measured/active'）。订阅({
下一步：数据=>{
调试（数据）；
data.forEach（功能（项目、图表）{
//让图表=[]；
document.getElementById（'charts'）.innerHTML
+=''+item.name+'（'+item.unit+'）'+''
+ '';
设newCharts=new SmoothieChart（）；
streamTo（document.getElementById（'chart'+item.id））；
图表。推送（新图表）；
});
},
错误：错误=>{
console.error（'无法加载任何可测量的'，error.message）；
}
})
调试（this.charts）；
}
}

不幸的是，我不太熟悉前端技术，所以我真的不知道如何正确地使用它。有人能帮我吗

您是否希望控制台.log（this.charts）记录图表？这行不通 因为http请求是一个异步调用。所以请求被启动，浏览器移动到执行下一条语句

这意味着在启动后端请求后，浏览器将移动到

console.log（this.charts）

语句。subscribe中的代码在http请求完成后运行

用户可以通过添加断点来查看此操作

现在将

console.log（this.charts）

添加到订阅内部的

forEach

循环结束之后

使用innerHtml，在angular中不推荐使用queryselecting。使用角度插值

{{}

可以更轻松地完成同样的事情。为此，将数据从服务保存到类中的公共属性，并在html中使用它

从组件调用http服务不是推荐的方法。将对后端api的调用移动到服务，并从组件调用该服务

---

谢谢你的帮助！它工作得很好！