如何使用 forEach (Angular/TypeScript) 替换 d3.csv 解析对象中的值

时间:2021-06-18 13:55:12

标签: javascript angular typescript d3.js

我正在尝试在 Angular 中实现 d3-example 我在尝试替换数据对象中的值时遇到了问题。 (我根据 package.json 使用 Angular v12.0.4 和 d3 v7.0.0)

这是我的 data.csv:

year,population
1950,2525149312
1951,2571867515
1952,2617940399
1953,2664029010

这里是用数字和日期对象替换字符串的函数:

let data = d3.csv('/assets/data.csv').then(data => {

  data.forEach(d => {
    d.population = +d.population;
    d.year = new Date(d.year);
  })
})

在独立的 .js 文件中实现相同的代码时,没有问题,但在 Angular 中,我收到错误

Type 'number' is not assignable to type 'string'.ts(2322) 用于 d.population = ...

Type 'Date' is not assignable to type 'string'.ts(2322)d.year = ...

我发布了另一个问题 here,它可能相关,也可能无关,因为在 Angular 中实现时,本应起作用的示例却不起作用。

在 Angular 中实现这一点时我需要考虑什么吗?

编辑:

按照建议尝试使用括号(以及接口):

    let data2 = await d3.csv('/assets/world-population-by-year-2015.csv').then(data1 => {

      
      data1.forEach(d => ({
        population: +d.population,    // also tried `as unknown as Number` istead of +
        year: new Date(d.year)
      }))
      console.log(data1)              // 0: {year: "1950", population: "2525149312"} ...
      return data1
      
    })
    console.log(data2[0]['year'])         // 1950
    console.log(typeof(data2[0]['year'])) // string

类型错误消失了,但似乎没有任何改变,值仍然是字符串。用接口代替括号的结果是一样的:

interface IPopulation {
  population: Number;
  year: Date;
}

.then(data1 => <IPopulation>{...

0 个答案:

没有答案
相关问题