2017-02-20 33 views
3

我正在創建一個角度項目,但在開發時我在下面出錯。我試圖解決這個問題,但我沒有。無法綁定到'chartData',因爲它不是「div」的已知屬性,角度爲2?

例外:未捕獲(承諾):錯誤:模板解析錯誤: 無法綁定到'chartData',因爲它不是'div'的已知屬性。

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] 
}) 
相關問題