我使用Angular 6
。
在我的component.ts文件中,我必须初始化graph,并在**ngOnIt()**方法中这样做
@Component({
selector: 'app-contact-detail',
templateUrl: './contact-detail.component.html',
styleUrls: ['./contact-detail.component.css']
})
export class ContactDetailComponent implements OnInit {
contact_id: string;
public graph_data_year;
constructor(
private activatedRoute: ActivatedRoute,
private graphDataService: GraphDataService
) { }
ngOnInit() {
this.activatedRoute.params.subscribe(
param => {
this.contact_id = param['id'];
}
);
/**
* Get Amount Given Graph Data
*/
this.graphDataService.get_data(this.contact_id).subscribe(
res => {
const data = [];
res.forEach(e => {
data.push(e.total);
});
this.graph_data_year = data;
this._setGraphData();
}
);
this.initializeGraph();
}
_setGraphData() {
this.lineBigDashboardChartData[0]['data'] = this.graph_data_year;
// this console here gives updated value in the console window, but no update on chart
console.log(this.lineBigDashboardChartData);
}
/**
* Graph
*/
initializeGraph() {
...
this.lineBigDashboardChartData = [
{
label: 'Data',
...
...
data: this.graph_data_year
}
];
this.lineBigDashboardChartLabels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
this.lineBigDashboardChartType = 'line';
}
}
而component.html就像
<canvas baseChart id="bigDashboardChart"
[datasets]="lineBigDashboardChartData"
[labels]="lineBigDashboardChartLabels"
[chartType]="lineBigDashboardChartType"></canvas>
但它不会使用this.graphDataService更新的graph_data_year的更新值更新图表。并显示空白图表。console.log(this.lineBigDashboardChartData);
更新数据后,在控制台窗口中打印更新的值,但图表数据未更新。
我怎样才能在组件中有一个basec变量,在更新时,在组件中使用它的每个地方都更新值?或者我如何在更新数据后刷新购物车?
4条答案
按热度按时间ppcbkaq51#
请尝试像这样添加ChartType;
[chartType]="'line'"
和你不应该改变标签原始数组引用。尝试使用此方法创建动态标签;cyej8jka2#
扩展@Mehmet回答,这解决了我的问题。
qv7cva1a3#
如果将
this.initializeGraph()
移动到ngOnInit中的console.log语句的正下方,会发生什么情况33qvvth14#
Canvas在初始化数据之前首先加载图表。将 *ngIf(数据有值)添加到父div。
这可确保在加载图表之前更新数据。