将带下划线的JSON响应名称映射到对象数组时，Angular2 Typescript编译错误

Question

我是angular2的新手，正在尝试将JSON响应映射到自定义对象的数组。 我看到的奇怪行为是，当我尝试访问带下划线的变量时，收到编译错误。 我以“英雄之旅”代码为蓝本。

我的对象是：

export class EventCount {
  event_count: number;
  name: string;
  id: string;  
}

要匹配JSON响应示例：

[{"event_count":10,"name":"dev-03","id":"0001"},
 {"event_count":6,"name":"dev-02","id":"0002"}]

我的http.get请求看起来像：

getEventCounts(): Observable<Array<any>> {
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });
  let query = this.getEventCountURL;
  return this.http.get(query, options)
    .map(this.extractCounts)
    .catch(this.handleError);
}

地图中调用的函数如下所示：

private extractCounts(response: Response) {
  if (response != null) {
    try {
      let myCounts = response.json() as EventCount[];
      for (let entry of myCounts) {
        console.log("Name: " + entry.name + ", id: " + entry.id );
      }
    } catch (e) {
      console.error(e.toString());
    }
  }
  return myCounts;
}

上面的代码工作正常，并且我在控制台日志中收到正确的输出。

Name: dev-03, id: 0001
Name: dev-02, id: 0002

但是，当我将日志更改为以下内容时：

console.log("Name: " + entry.name + ", count: " + entry.event_count );

我收到一个编译错误：

ERROR in .../count.service.ts: Property 'event_count' does not exist on type 'EventCount'.

在VSCode调试器中，当我在日志打印输出中不使用它时，我可以清楚地看到entry对象中的event_count变量已被填充。

有想法或想法吗？ 提前致谢！

Answer 1

我发现您的代码只有一个问题，几乎与Http上angular.io文档的问题相同。 这与myCounts的本地定义有关，在return语句需要它的地方看不到它。 除此之外，当我用entry.event_count替换entry.id时，一切正常。 我在if语句之前声明let myCounts：EventCount []，也将as删除为EventCount []。 由于您是Angular的新手，因此应该使用该平台的最新版本。