Не может привязываться к "данным", поскольку это не является известным свойством "холста",

Я пытаюсь использовать ng2-диаграммы и запускать ошибку, которая говорит, что элементы, которые я использую, неверны.
Я пробовал несколько ответов на этом сайте, но не повезло:

NG2-Charts Невозможно привязываться к "наборам данных", поскольку это не известное свойство "холста",

ng2-charts - не может привязываться к "наборам данных", поскольку это не известное свойство "базовой диаграммы",

Вот мой код:

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "four-item-horse-shoe-graph.component.html",
    styleUrls: ["four-item-horse-shoe-graph.component.css"],
    selector: "four-item-horse-shoe"
})

export class FourItemHorseShoeGraphComponent {
    // Doughnut
    public doughnutChartLabels: string[] = ["Download Sales", "In-Store 
        Sales", "Mail-Order Sales"];
    public doughnutChartData: number[] = [350, 450, 100];
    public doughnutChartType: string = "doughnut";

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

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

И HTML:

<div style="display: block">
<canvas baseChart
        [data]="doughnutChartData"
        [labels]="doughnutChartLabels"
        [chartType]="doughnutChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
</canvas>

systemjs.config.js:

            'chart': 'npm:chart.js/src/chart.js',
        "ng2-charts": "node_modules/ng2-charts"
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        "ng2-charts": { main: "ng2-charts.js", defaultExtension: "js" }

app.module.ts

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

declare let jQuery: Object;

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    CoreFeatureModule,
    LayoutModule,
    ChartsModule

ОШИБКА:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): [email protected]:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): [email protected]:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): [email protected]:9 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {_nativeError: Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<d…} Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): [email protected]:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): [email protected]:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): [email protected]:9
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>]
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>]
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>]
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>]
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>]
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>]
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
consoleError @ zone.js:405
_loop_1 @ zone.js:434
drainMicroTaskQueue @ zone.js:438
ZoneTask.invoke @ zone.js:349
zone.js:407 Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): [email protected]:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): [email protected]:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): [email protected]:9
Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): [email protected]:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): [email protected]:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): [email protected]:9
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>]
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>]
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>]
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>]
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>]
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>]
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>]
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>]
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>]
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>]
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>]
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>]
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
    at resolvePromise (http://localhost:44444/node_modules/zone.js/dist/zone.js:486:31) [<root>]
    at resolvePromise (http://localhost:44444/node_modules/zone.js/dist/zone.js:471:17) [<root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:17 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
consoleError @ zone.js:407
_loop_1 @ zone.js:434
drainMicroTaskQueue @ zone.js:438
ZoneTask.invoke @ zone.js:349

Ответ 1

Мне нужно было импортировать ChartModule в файле module.ts компонента, в котором я хотел использовать диаграмму. Я изначально импортировал ее только в app.module.ts.

Ответ 2

Попробуйте использовать синтаксис атрибута для привязки:

Вместо:

[data]="doughnutChartData"

Пытаться:

attr.data="{{doughnutChartData}}"

Я не уверен, что это будет работать в вашем случае, но это связано с тем, что свойство DOM по сравнению с атрибутом и как Angular обрабатывает привязку для обоих.

Ответ 3

В файле app.module.ts в декораторе NgModule есть массив с именем import, упомяните ChartsModule в массиве import, например,

imports: [BrowserModule, RouterModule.forRoot(appRoutes),ChartsModule ],

Это помогло мне. Это может быть полезно и для вас

Ответ 4

Для версии Angular 7 или выше

npm install [email protected]

--save npm install chart.js --save