如何从角度响应数据初始化对象数组？答案

【问题标题】：How to initialize an array of objects from response data in angular?如何从角度响应数据初始化对象数组？
【发布时间】：2020-12-05 00:14:50
【问题描述】：

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

[
{
    "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);
  }
}

不幸的是，我对前端技术不是很熟悉，所以我真的不知道我应该如何正确地让它工作。有人可以帮帮我吗？

【问题讨论】：

标签： angular typescript

【解决方案1】：

您是否希望console.log(this.charts) 记录图表？这行不通因为http请求是异步调用。所以请求被启动并且浏览器移动到执行下一条语句
这意味着在发起后端请求后，浏览器将移动到console.log(this.charts) 语句。 subscribe 中的代码在 http 请求完成后运行
用户可以通过添加断点看到这一点
现在在订阅内的forEach 循环结束后添加console.log(this.charts)。
使用innerHtml，查询选择不是Angular 推荐的东西。您可以使用角度插值{{}} 以更简单的方式做同样的事情。为此，将服务中的数据保存到类中的公共属性中，并在 html 中使用。
不推荐从组件调用 http 服务。将对后端 api 的调用移至服务并从组件调用服务

【讨论】：