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

Question

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

无法绑定到“data”，因为它不是“canvas”的已知属性。("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>

这里会有什么问题呢？

Answer 1

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

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

imports: [
   ChartsModule
]

由于某些原因，您没有这样做。

还可以查看该issue