在Angular/Node.js应用程序中使用Ng2图表时出现运行时错误

Question

在我的 Angular4 - Node.js应用程序中，我在运行时收到以下错误。

无法绑定到"数据"，因为它不是"画布"的已知属性。("四>

][data]="doughnutChartData" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" (chartHover"(： ng:///AppModule/DashboardComponent.html

组件的 module.ts 文件如下所示：

import { NgModule } from '';
import { CommonModule } from '';
import { ChartsModule as Ng2Charts } from 'ng2-charts';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';
import {
TimelineComponent,
NotificationComponent,
ChatComponent
} from './components';
import { StatModule } from '../shared';
@NgModule({
imports: [
CommonModule,
Ng2Charts,
DashboardRoutingModule,
StatModule,
],
declarations: [
DashboardComponent,
TimelineComponent,
NotificationComponent,
ChatComponent
]
})
export class DashboardModule { }

组件.html文件如下所示：

<div class="col col-sm-6">
<div class="card mb-3" style="border: none">
<div class="card-header claim-header-style" style="background: #FC0!important;color: #fff;">
SUSPECT REASON
</div>
<div class="card-block">
<canvas baseChart height="180px" [data]="doughnutChartData" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>
</div>
</div>
</div>
<div class="col col-sm-6">
<div class="card mb-3" style="border:none;">
<div class="card-header claim-header-style" style="background: #28426b!important;color: #fff;">
REJECT REASON
</div>
<div class="card-block">
<canvas baseChart height="180px" [data]="doughnutChartData" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>
</div>
</div>
</div>

这里可能出了什么问题？

Answer 1

尝试在组件中import 'chart.js'实际使用canvas的位置，如果这样做，请不要在本节index. html<script>中引用chart.js。

还要尝试将ChartsModule导入到您的DashboardModule

imports: [
ChartsModule
]

至于出于某种原因，你没有这样做。

还要查看该问题