Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'chart'

Question

我有以下组件

import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'chart',
    templateUrl: 'app/comps/chart.html',
    providers: [],
})
export class ChartComp {

    constructor() {
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }
    options: Object;
}

和模块文件

import { ChartModule } from 'angular2-highcharts';

@NgModule({
    imports: [ChartModule.forRoot(require('highcharts'))],

declarations: [Chart],
exports: [Chart]})

export class ModuleFile {
....
}

和html文件

<chart [options]="options"></chart>

然后我有一个示例页面，它实现了这个组件

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'example-chart',
    templateUrl:'app/comps/chart/example-chart.html',
    providers: [],
})


export class ExampleChart{

    constructor(

    ) {
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }
    options: Object;
}

和html

<chart [options]="options"></chart>

其中 options 是传递给 html 的配置。但不确定为什么我会收到这个奇怪的错误

EXCEPTION: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'chart'.
1. If 'chart' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

我尝试为选项添加 @Input。然后我得到一个 DI 错误。有什么想法吗？提前致谢。

Answer 1

您需要将其设为输入才能使用属性-binding:

绑定到它

@Input()
options: Object;

Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'chart'

Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'chart'

javascript

angularjs

angular

highcharts

angular2-highcharts