Question

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

无法绑定到'data'，因为它不是'canvas'的已知属性。（“IV＆GT;

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

componentsnet.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，如果您这样做，请不要在chart.js index. html部分引用<script>。

还尝试将ChartsModule导入您的DashboardModule

imports: [
   ChartsModule
]

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

同时结帐issue

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

1 个答案: