类型“ {}”上不存在属性“ forEach”

Question

我正在使用Angular CLI和D3.js v4，但不断收到TypeScript错误：Property 'forEach' does not exist on type '{}'。forEach当我尝试引入数据时，该函数发生错误。

我正在遵循D3技巧和窍门，这似乎非常广泛，并且对图形库很有帮助，但不幸的是，它对我当前的问题没有帮助。

我知道我的json文件的路径是正确的，因为console.log如果我的forEach函数在我的代码中被注释掉，我可以得到数据。

我还尝试data在forEach函数之前定义，以使Typescript知道这data是一个数组。

任何帮助表示赞赏！谢谢！

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
    selector: 'pl-lukaku-graphs',
    templateUrl: './lukaku-graphs.component.html',
    styleUrls: ['./lukaku-graphs.component.scss']
})
export class LukakuGraphsComponent implements OnInit {

    constructor() { }

    total_min() {
        // create var for graph wrap
        let wrap = document.getElementById("wrapMinPlayed");
        // set up graph area
        let margin = {top: 30, right: 20, bottom: 30, left: 20},
            width = wrap.offsetWidth - margin.left - margin.right,
            height = wrap.offsetHeight - margin.top - margin.bottom;
        let data = [];
        d3.json('../../../../assets/data/lukaku.json', function(error, data) {
            console.log(data);
            console.log(error);
            if (error) throw error;
            // format data
            data.forEach(function(d) {
                d.date = parseTime(d.date);
                d.close = +d.close;
            });
        });
    }

    ngOnInit() {
        this.total_min();
    }

}


[
    {
        "season": "16/17",
        "match_day": "1",
        "opponent": "Spurs",
        "home_away": "Home",
        "final": "1-1",
        "status": "Not in squad",
        "min_played": 0,
        "goals": 0,
        "goal_min": [],
        "assists": 0
    }
]

Answer 1

TypeScript在这里无法知道这data是一个具有forEach方法的数组。

为了解决此问题，data应正确键入，例如：

d3.json('../../../../assets/data/lukaku.json', function(error, data: any[]) {
  ...
})

由于d3.json是通用方法，因此正确的方法是指定通用类型：

d3.json<any[]>('../../../../assets/data/lukaku.json', function(error, data) {
  ...
})