我一直在用Angular-2做一个项目,使用这里的starter项目,
这个项目工作得很好,直到我对我的环境和项目进行了一些更新。现在数据对象将不会绑定。看起来charts.js没有被正确导入到项目中。
我确实在文档中看到,这里声明将charts.js文件嵌入到html文件中。在示例中,通过向src中添加node_modules来实现。我还以为这是绝对不可以的呢!我确实尝试过,但无法让应用程序在以这种方式引用时暴露文件。
当前版本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之前,图表显示良好。既然我已经更新了所有内容,即使回滚似乎也无法解决问题。
基本上在我的组件的任何地方。当我将数据对象绑定到图表时,它会给我错误,说数据对象不是基本图表的已知属性。我相信这是一个版本问题,更新后没有正确导入项目。
我在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
选择器base-chart
不再有效。
Per ng2-charts changelog
base-chart组件变成了baseChart指令,所以你需要转换
<base-chart...></base-chart>
<canvas baseChart...></canvas>
和
<div style='display:block'>...</div>
参见Plunker示例