Angular 2/PrimeNg - 通过@ViewChild 更新图表

Question

我正在为我的应用程序使用 Angular2 和 PrimeNG。我有一个带图表的仪表板。我尝试更新到 PrimeNG rc7(从 rc5，他们解决了更新图表的问题)，但由于他们的更改，我不知道如何更新我的图表，因为它必须通过调用方法来完成。

我读过@ViewChild 装饰器，但我真的不知道如何使用它。

我的图表.html:

<p-chart #linechart  type="line" #linechart
 id="linechart" [data]="ntwdata" [options]="options">
</p-chart>

我的仪表板.ts:

import { NTWDATA } from '../resources/mock/chartdata';

import { UIChart } from 'primeng/primeng';

@Component({
   selector: 'my-dashboard',
   templateUrl: 'dist/html/dashboard.component.html',
})

export class DashboardComponent {
   ntwdata = NTWDATA;
   options: any;

   constructor() {

   }

   ngOnInit() {

         this.options = {
            animation: false,
            legend: {
               display: true,
               labels: {
                  boxWidth: 0,
               }

            },
            scales: {
               yAxes: [{
                  scaleLabel: {
                     display: true,
                     labelString: "ms"
                  },
                  ticks: {
                     beginAtZero: true,
                     suggestedMax: 100,
                  }

               }],
               xAxes: [{
                  ticks: {
                     beginAtZero: true,
                     maxTicksLimit: 6,
                  }
               }]

            }
      }
   }
}

NTWDATA 每 2.5 秒更新一次，我的数据一切正常。

我的 DashboardComponent 是更新数据的组件的子组件。

父组件:

...
setInterval(()=>{
   NTWDATA.push(//mydata)
},2500);
...

我试过像这样将@ViewChild 添加到我的 parent :

@ViewChild("linechart") chart: UIChart

然后我在我的 setInterval 中调用了 refresh() 方法:

setInterval(()=>{
   NTWDATA.push(//mydata)
   this.chart.refresh();
},2500);

但是 this.chart 是未定义的。

然后我尝试像这样使用@ViewChild:

@ViewChild(Dashboard) dashcomp: Dashboard;
setInterval(()=>{
       NTWDATA.push(//mydata)
       this.dashcomp.chart.refresh();
    },2500);

在我的 child 身上:

@ViewChild('linechart') chart: UIChart;

正如我所说，我以前从未与@ViewChild 一起工作过，而且我认为我现在不太了解它，所以如果你们中的任何人有想法，我将不胜感激，如果你能和我谈谈好像我是傻子一样! :D

提前致谢!

Answer 1

<p-chart #chart type="bar" [data]="chartData" [options]="options"></p-chart>

然后在你的 Angular 组件中

import { UIChart } from "primeng/components/chart/chart";

获取 View 引用(更改“图表”引用)

@ViewChild("chart") chart: UIChart; 

this.chart.reinit(); 

设置值后。