2017-02-20 9 views
3

私は角度のあるプロジェクトを作成していますが、これを開発しているうちに私は下にエラーがあります。私はこれを解決しようとしたが、私はしなかった。'chartData'にバインドできません。これは角度2の 'div'の既知のプロパティではないためですか?

例外:キャッチされない(約束で):エラー:テンプレートは、エラーを解析:それは「DIV」の既知の特性ではないので は「chartData」にバインドできません。

EXCEPTION: Uncaught (in promise): Error: Template parse errors: 
Can't bind to 'chartData' since it isn't a known property of 'div'. ("<h1>Profile- {{name}} here</h1> 
<div id="pie_chart", 
    [ERROR ->][chartData]="pie_ChartData", 
    [chartOptions] = "pie_ChartOptions", 
    chartType="PieChart", 
"): [email protected]:4 

私が間違っているところを教えてください。

profile.component.ts:

import { Component, OnInit,HostBinding,Input }   from '@angular/core'; 
import { Router,ActivatedRoute }     from '@angular/router'; 
import { slideInDownAnimation }     from '../../animations/animations' 
import { GoogleChart}        from'../../../../directives/angular2-google-chart.directive'; 

@Component({ 
    selector: 'profile-component2', 
    directives: [GoogleChart], 
    templateUrl:`../app/modules/dashboard/dashComponents/profileComponents/profile.component.html`, 
    animations:[slideInDownAnimation] 
}) 

export class ProfileComponent2 implements OnInit { 

name="Shubham"; 
message: string; 
@HostBinding('@routeAnimation') routeAnimation = true; 
@HostBinding('style.display') display = 'block'; 
@HostBinding('style.position') position = 'absolute'; 
public login:{} = {}; 
private interval:any; 
ngOnInit() { 
     console.log("profile component2 initialized"); 
    } 
     public pie_ChartData = [ 
       ['Task', 'Hours per Day'], 
       ['Work',  11], 
       ['Eat',  2], 
       ['Commute', 2], 
       ['Watch TV', 2], 
       ['Sleep', 7] ]; 

     public pie_ChartOptions = { 
     title: 'My Daily Activities', 
     width: 900, 
     height: 500 
     }; 
} 

profile.component.html:

<h1>Profile- {{name}} here</h1> 
<div id="pie_chart", 
    [chartData]="pie_ChartData", 
    [chartOptions] = "pie_ChartOptions", 
    chartType="PieChart", 
    GoogleChart> </div> 

答えて

1

はい、答えを得ました。

app.module.tsに線の下に追加します。

import {GoogleChart} from '../directives/angular2-google-chart.directive'; 

@NgModule({ 
    imports: [ ], 
    declarations: [GoogleChart] 
}) 
関連する問題