Angular Can'；t将数组传递给chart.js，chart.js从@Input获取数据

我试图了解如何将数据从父组件传递到子组件。
更具体地说，我想将和数组从父组件移交给子组件，以便将其用作图表的数据源

我使用的是

angular8

，

mdbootstrap

（它使用

chart.js2.5.0

）。我阅读了一系列教程，了解了如何将内容从父组件传递到子组件。我可以使用外推从我的子模板中访问字符串等。
我的问题可能与chart.js处理图表呈现的方式有关。
我不确定它在生命周期的哪个阶段需要数据。我试图在

ngOnInit

方法和

AfterViewInit

方法中填充所需的变量（代码中未显示），但这没有改变任何事情

父组件（statistics.Component.ts）

导出类统计组件实现OnInit{
//业务逻辑
public isDataLoaded=false；
public clientNumberList:string[]=new Array（）；
public clientNumberCountList:number[]=新数组（）；
//图表相关的东西
公共图表标签='用户统计'；
公共图表选项：任意={
回答：是的，
MaintaintAspectRatio:false，
比例：{
xAxes：[{
scaleLabel：{
显示：对，
labelString:“客户端编号”
}
}],
雅克斯：[{
scaleLabel：{
显示：对，
标签串：“伯爵”
}
}]
}
};
构造函数（专用SDousersStatisticsService:SDousersStatisticsService）{}
ngOnInit（）：void{
//获取用户和计数
此.sdousersstatisticsService.getUserStatistics（）.subscribe（用户=>{
for（const user of users）{
this.clientNumberList.push（user.clientNumber）；
this.clientNumberCountList.push（user.count）；
}
this.isDataLoaded=true；
})
;
}
}

statistics.component.html

子组件（条形图.Component.ts）

导出类BarChartComponent实现OnInit{
公共图表类型='bar'；
@Input（）chartLabelInput:字符串；
@Input（）dataArrayInput:number[]；
公共图表标签：字符串；
public dataArray:number[]=this.dataArrayInput；
公共图表数据集：数组=[
{data:this.dataArray，label:this.chartLabel}
];
@Input（）标签阵列：字符串[]；
公共图表标签：Array=this.labelArray；
@Input（）图表选项输入：任意；
公共图表选项=this.chartOptions输入；
构造函数（）{}
公共目录（e:any）：void{}
公共图表悬停（e:any）：void{}
ngOnInit（）：void{}
}

bar-chart.component.html

我希望可以访问bar-chart.component.ts中的dataArrayInput，从而将这些数据提供给图表。 实际上，我可以通过ngOnInit方法（代码中未显示）访问此数组，但不能将其用于图表。 我在浏览器控制台中遇到以下错误：

ERROR TypeError: "newElm.data is undefined"
    Angular 10
        datasets
        getDatasets
        getChartBuilder
        refresh
        ngOnInit
        checkAndUpdateDirectiveInline
        checkAndUpdateNodeInline
        checkAndUpdateNode
        debugCheckAndUpdateNode
        debugCheckDirectivesFn
    View_BarChartComponent_0 BarChartComponent.html:1
    Angular 30
    RxJS 5
    Angular 9ERROR TypeError: "newElm.data is undefined"
    Angular 10
        datasets
        getDatasets
        getChartBuilder
        refresh
        ngOnInit
        checkAndUpdateDirectiveInline
        checkAndUpdateNodeInline
        checkAndUpdateNode
        debugCheckAndUpdateNode
        debugCheckDirectivesFn
    View_BarChartComponent_0 BarChartComponent.html:1
    Angular 30
    RxJS 5
    Angular 9

---

我希望有人能帮助我：）

我认为这是一个问题。您的问题在于如何使用

@Input

数据。显然，您希望获取随

dataArrayInput

而来的数据，但您没有正确访问它

将依赖@Input值的变量赋值移动到

ngOnInit

方法中。组件构造期间，

@Input

变量的值不可用，因此当您创建因变量时，您将使用

未定义的

对其进行初始化

导出类BarChartComponent实现OnInit{
公共图表类型='bar'；
@Input（）chartLabelInput:字符串；
@Input（）dataArrayInput:number[]；
公共图表标签：字符串；
公共数据数组：编号[]；
公共图表数据集：数组；
@Input（）标签阵列：字符串[]；
公共图表标签：数组；
@Input（）图表选项输入：任意；
公共选择；
构造函数（）{}
公共目录（e:any）：void{}
公共图表悬停（e:any）：void{}
ngOnInit（）：void{
this.dataArray=this.dataArrayInput；
此参数为.chartDatasets=[{
数据：this.dataArray，
标签：this.chartLabel
}];
this.chartLabels=this.labelArray；
this.chartOptions=this.chartOptions输入；
}
}

---

看看这个和这个。

可能重复@BenRacicot我在发布问题之前阅读了这个问题和答案。它帮助我大体上理解了这个问题。但是chart.js部分的问题仍然存在。明白了，父级中的数组在发送到任何地方之前看起来是否正确？为了我们的利益，我会在StackBlitz中复制这一点。是的，如果我将父组件和子组件中的数组内容打印到控制台，它们是相同的。好的，我将尝试复制stackblitzOk中的问题，因此您可能希望更改问题的标题，使其不是dup，并且可能更具体地针对chart.js和Angular。嘿，什么是

newElm

？这不在你的代码中，问题就在那里。太棒了！这消除了关于未定义字段的错误！非常感谢。现在我的问题是：chart options变量的类型是Object。我无法访问它的内容。我必须和它做点什么吗？你应该能够。。。我看到您在statistics.component.ts中声明了它，所以它在语法上看起来并不无效。这应该是一个简单的问题，做

chartOptions.responsive

或其他什么。可能是chart.js的配置问题？idkOk，我知道了。我必须将

中的

div

移动到子模板中。非常感谢你的帮助！