Angular 4 ChartJSコンポーネントがレンダリングされないのはなぜですか？

Question

Angular 4 ChartJSコンポーネントがレンダリングされない理由を理解しようとしています。

私は糸を使用してパッケージをインストールしましたが、存在し、正しくインポートします。私はクロムコンソールでChartオブジェクトを見ることができますが、キャンバス要素は空白のままです。

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; 
import Chart from 'chart.js'; 

@Component({ 
    selector: 'app-root', 
    template: '<canvas #aChart></canvas>', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements OnInit { 
    @ViewChild('aChart') htmlChart: ElementRef; 
    public data = { 
    labels: [ 
     'Value A', 
     'Value B' 
    ], 
    datasets: [ 
     { 
     'data': [101342, 55342], // Example data 
     'backgroundColor': [ 
      '#1fc8f8', 
      '#76a346' 
     ] 
     }] 
    }; 

    constructor(public myElement: ElementRef) {} 

    ngOnInit() { 
    const ctx: CanvasRenderingContext2D = this.htmlChart.nativeElement.getContext('2d'); 
    const newChart: Chart = new Chart(ctx, { 
     'type': 'doughnut', 
     'data': this.data, 
     'options': { 
     'cutoutPercentage': 50, 
     'animation': { 
      'animateScale': true, 
      'animateRotate': false 
     } 
     } 
    }); 
    console.log('chart', newChart); 
    } 
} 

Answer 1

内canvas要素を囲む必要があります。以前のスレッドで指摘したように、それはどちらかのdivに包まれたこと、もしくはangular4に、単純に設定することができますにホストCSSの要素を：

:host { 
    display: block 
} 

Answer 2

あなたはあなたが含まれている要素は、 `ブロック」の表示タイプを持っていることを確認する必要がありdiv

template: '<div><canvas #aChart></canvas></div>',