Question

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

我关注的是D3 Tips and Tricks，这对于图表库来说似乎非常广泛且有用，但遗憾的是对我当前的问题没有帮助。

我知道我的json文件的路径是正确的bc如果我的代码中注释了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无法知道plot "a.dat" w lp title columnheader是一个具有data方法的数组。

为了解决这个问题，我应该正确键入forEach，例如：

data

由于d3.json('../../../../assets/data/lukaku.json', function(error, data: any[]) { ... })为generic method，正确的方法是指定泛型类型：

d3.json

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

1 个答案: