NG0303：无法绑定到"类型"，因为它不是'canvas'的已知属性

Question

我执行了以下步骤：npm安装ng2-charts@next--保存

它安装了

"ng2-charts": "^3.0.0-rc.7"

npm安装图表.js--保存

它安装了

chart.js": "^2.9.4",

npm安装--保存dev-ng2图表原理图

npm安装

ng发球-o

Angular版本为11.2

"@angular/compiler": "11.2.2",
"@angular/core": "11.2.2",
"@angular/forms": "11.2.2",

当加载父组件页面时，它会抛出以下错误：

NG0303: Can't bind to 'type' since it isn't a known property of 'canvas'.

NG0303: Can't bind to 'datasets' since it isn't a known property of 'canvas'.

NG0303: Can't bind to 'labels' since it isn't a known property of 'canvas'.

NG0303: Can't bind to 'options' since it isn't a known property of 'canvas'.

NG0303: Can't bind to 'plugins' since it isn't a known property of 'canvas'.

NG0303: Can't bind to 'legend' since it isn't a known property of 'canvas'.

可能出了什么问题？这不起作用吗？在扩展此警报时，：

logUnknownPropertyError@InteractionHandler。ts:[e-mail]:9961ɵ属性@InteractionHandler。ts:[e-mail]:[e-mail]:9545refreshView@InteractionHandler。ts:9414refreshComponent@InteractionHandler。ts:[e-mail]:9211refreshView@InteractionHandler。ts:9464refreshComponent@InteractionHandler。ts:[e-mail]:9211refreshView@InteractionHandler。ts:9464refreshEmbeddedViews@InteractionHandler。ts:10534refreshView@InteractionHandler。ts:9438refreshComponent@InteractionHandler。ts:[e-mail]:9211refreshView@InteractionHandler。ts:9464refreshEmbeddedViews@InteractionHandler。ts:10534refreshView@InteractionHandler。ts:9438refreshEmbeddedViews@InteractionHandler。ts:10534refreshView@InteractionHandler。ts:9438refreshComponent@InteractionHandler。ts:[e-mail]:9211refreshView@InteractionHandler。ts:[e-mail]:9528tickRootContext@InteractionHandler。ts:10754detectChangesInRootView@InteractionHandler。ts:100779detectChanges@InteractionHandler。ts:22792tick@InteractionHandler。ts:29516(匿名)@InteractionHandler。ts:[e-mail]:386onInvoke@InteractionHandler。ts:[e-mail]:[e-mail]:143运行@InteractionHandler。ts:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:25879checkStable@交互处理程序.ts:[e-mail]:[e-mail]:[e-mail]:462区域[e-mail]:[e-mail]:[e-mail]:601Promise.then(异步)[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:819(匿名)@zone.js:739webpackJsonpCallback@bootstrap:25(匿名)@layouts admin layout admin layout module.js:1再显示20帧交互处理程序.ts:10069

饼图html:

<画布基图表[type]="馅饼"；[数据集]＝"；pieChartDatasets；[labels]＝"；pieChartLabels；[选项]="；pieChartOptions；[plugins]＝"；pieChartPlugins；[图例]="；pieChartLegend"gt；

饼图ts文件

从"@angular/core"导入｛Component｝；从"chart.js"导入｛ChartType，ChartOptions｝；//从"ng2 charts"导入｛SingleDataSet，Label，monkeyPatchChartJsLegend，monkeyatchChartJsTooltip｝；

@组件({选择器：'应用程序饼图'，templateUrl:"/饼图.component.html'，styleUrls:['./pie-chart.component.css']})

导出类PieChartComponent｛

//派public pieChartOptions:ChartOptions<'馅饼'>={响应：false，}；public pieChartLabels=[['下载'，'销售']，[在'，'商店'，'销售额']，'邮件销售']；public pieChartDatasets=[{数据：[300500100]}]；public pieChartLegend=true；public pieChartPlugins=[]；}

模块.ts具有以下功能：

从'src/app/components/pie-chart/pie-chart.component'导入｛PieChartComponent｝；

声明：[饼图组件]

父html文件具有<app-pie-chart></app-pie-chart>

请提出建议？https://github.com/valor-software/ng2-charts/issues/1459【官方Github发布】

Answer 1

您不应该安装ng2 charts的next分支，这是最新版本的旧版本，而且在使用ng2 Chart 3.0或更高版本时，您需要确保至少安装了Chart.js的3.0版本，它不适用于版本2。

使用npm i chart.js不应该像你声称的那样给你2.9.4，它应该安装最新版本，但要确保你可以为两者指定最新版本：

npm i chart.js@3.8.2
npm i ng2-charts@3.1.2