Question

我使用找到的here初学者项目在Angular-2中开展了一个项目，

该项目非常有效，直到我对我的环境和项目进行了一些更新。现在数据对象不会绑定。似乎chart.js没有正确导入到项目中。

我确实在文档Here中看到它声明要将charts.js文件嵌入到html文件中。这是在示例中通过将node_modules添加到src来完成的。我的印象是这是一个巨大的不，不！我确实尝试了这个，但是当以这种方式引用时，无法让应用程序公开文件。

当前版本

angular-cli: 1.0.0-beta.17
node: 6.7.0
os: darwin x64 Sierra
npm: 3.10.3

更新到

后

"angular-cli": "1.0.0-beta.17"

我开始收到错误。我继续将所有内容更新到最新版本，希望能够清除它们。更新后似乎没有将Charts.js导入项目。在更新angular-cli之前，图表显示正常。现在我已经更新了所有内容，即使回滚也似乎无法解决问题。

基本上我的component.ts文件中的任何地方，我将数据对象绑定到图表，它给出了错误，说明数据对象不是基本图表之外的已知属性。我相信这是一个版本控制问题，并且在更新后没有正确导入到项目中。

我在angular-cli.json

中导入了这样的图表

"scripts": [
        "../node_modules/chart.js/dist/Chart.bundle.min.js",
        "../node_modules/chart.js/dist/Chart.min.js"
      ],

然后在app.module.ts

import { ChartsModule }                 from 'ng2-charts/ng2-charts';

@NgModule({
  imports: [
    BrowserModule,
    routing,
    Ng2BootstrapModule,
    ChartsModule
  ],

我正在运行的当前版本

"dependencies": {
    "@angular/common": "2.0.2",
    "@angular/compiler": "2.0.2",
    "@angular/core": "2.0.2",
    "@angular/forms": "2.0.2",
    "@angular/http": "2.0.2",
    "@angular/platform-browser": "2.0.2",
    "@angular/platform-browser-dynamic": "2.0.2",
    "@angular/router": "3.0.2",
    "@angular/upgrade": "2.0.2",
    "core-js": "^2.4.0",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.6.25",
    "chart.js": "^2.3.0",
    "ng2-bootstrap": "^1.1.5",
    "ng2-charts": "^1.3.0",
    "moment": "^2.15.1"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.34",
    "angular-cli": "1.0.0-beta.17",
    "codelyzer": "1.0.0-beta.0",
    "jasmine-core": "^2.5.1",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.4.1",
    "tslint": "^3.15.1",
    "typescript": "^2.0.3"
  }

以下是一些错误，

Can't bind to 'datasets' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'datasets' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("iv>
                <div class="chart-wrapper p-x-1">
                    <base-chart class="chart" [ERROR ->][datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineC"): DashboardComponent@19:46
Can't bind to 'labels' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'labels' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("ss="chart-wrapper p-x-1">
                    <base-chart class="chart" [datasets]="lineChart1Data" [ERROR ->][labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="line"): DashboardComponent@19:74
Can't bind to 'options' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("                  <base-chart class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [ERROR ->][options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="l"): DashboardComponent@19:102
Can't bind to 'colors' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'colors' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [ERROR ->][colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="c"): DashboardComponent@19:132
Can't bind to 'legend' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'legend' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("eChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [ERROR ->][legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartCl"): DashboardComponent@19:161
Can't bind to 'chartType' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'chartType' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("hart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [ERROR ->][chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
"): DashboardComponent@19:189

Answer 1

选择器base-chart不再有效。

每ng2-charts changelog

基础图表组件成为baseChart指令，因此您需要转换

<base-chart...></base-chart>

到

<canvas baseChart...></canvas>

并且最有可能包装

<div style='display:block'>...</div>

参见 Plunker Example

Angular 2 Chart.js和NG2-Charts在更新项目后没有绑定数据对象

1 个答案: