在 Angular/Node.js 应用程序中使用 Ng2-charts 时出现运行时错误答案

【问题标题】：Run time error while using Ng2-charts in Angular/Node.js application在 Angular/Node.js 应用程序中使用 Ng2-charts 时出现运行时错误
【发布时间】：2018-01-30 05:26:01
【问题描述】：

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

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

][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 { }

componenet.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>

这里有什么问题？

【问题讨论】：

标签： node.js angular webpack ng2-charts

【解决方案1】：

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

同时尝试将ChartsModule 导入到您的DashboardModule 中

imports: [
   ChartsModule
]

由于某种原因你没有这样做。

还可以查看issue

【讨论】：