Question

我尝试使用ng2-charts（http://valor-software.com/ng2-charts/）但是当我运行angular2应用程序时出现此错误：

"Template parse errors:
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.schema' of this component to suppress this message.

这是代码

产品-list.component.ts

import { Component, OnInit } from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';

import {CHART_DIRECTIVES} from './../../../node_modules/ng2-charts';

@Component({
    selector: 'products-list',
    templateUrl: 'app/components/products-list/products-list.component.html',
    directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})

export class ProductsListComponent implements OnInit {

    ngOnInit(){}
// lineChart
  public lineChartData:Array<any> = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
  ];
  public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions:any = {
    animation: false,
    responsive: true
  };
  public lineChartColours:Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
  ];
  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line';

  public randomize():void {
    let _lineChartData:Array<any> = new Array(this.lineChartData.length);
    for (let i = 0; i < this.lineChartData.length; i++) {
      _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
      for (let j = 0; j < this.lineChartData[i].data.length; j++) {
        _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
      }
    }
    this.lineChartData = _lineChartData;
  }

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }
}

产品-list.component.html

<div class="row">
  <div class="col-md-6">
    <base-chart class="chart"
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [colors]="lineChartColours"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart>
  </div>
  <div class="col-md-6" style="margin-bottom: 10px;">
    <table class="table table-responsive table-condensed">
      <tr>
        <th *ngFor="let label of lineChartLabels"></th>
      </tr>
      <tr *ngFor="let d of lineChartData">
        <td *ngFor="let label of lineChartLabels; let j=index"></td>
      </tr>
    </table>
    <button (click)="randomize()">CLICK</button>
  </div>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';


import { AppRoutingRoutes } from './app.routing';

import {TmpServices} from './services/tmp-services';

import { AppComponent } from './app.component';
import { AuthenticationComponent } from './components/authentication/authentication.component';
import { ProductsListComponent } from './components/products-list/products-list.component';
import { SearchProductsComponent } from './components/search-products/search-products.component';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        AppRoutingRoutes,
    ],
    declarations: [
        AppComponent,
        AuthenticationComponent,
        ProductsListComponent,
        SearchProductsComponent
        ],
    providers: [TmpServices],
    bootstrap: [AppComponent],
})
export class AppModule { }

提前致谢

修改

的index.html

<!DOCTYPE html>
<html>

<head>

  <script src="node_modules/chart.js/dist/Chart.js"></script>
  <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

  <script>document.write('<base href="/" />');</script>

  <title>Nome da App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Polyfill(s) for older browsers -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>

  <script src="systemjs.config.js"></script>
  <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
  <my-app>Loading...</my-app>
</body>

</html>

顺便说一下，我使用的是Angular2的RC5版本。

Answer 1

我遇到了同样的错误，请执行此操作，也许它也适用于您：

从import {CHART_DIRECTIVES} from './../../../node_modules/ng2-charts';

directives: [ CHART_DIRECTIVES ]

products-list.component.ts

将此添加到您的app.module.ts：

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

// In your App's module:
imports: [
    ChartsModule
]

Source here

另请注意，在Angular 2中，您不必在组件中声明指令，而是在ngModule中

Answer 2

在您的app模块中尝试：

import { ChartsModule } from 'ng2-charts';

并将ChartsModule添加到您的导入@NgModule

在system.config文件中，将以下内容添加到您的包中：

'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js' }

并在map部分添加： 'ng2-charts': 'node_modules/ng2-charts'

在Angular2 Apps中使用ng2-charts时出错

2 个答案: