如何让 Angular 2（或 4）PrimeNg 图表异步刷新？答案

【问题标题】：How do you get Angular 2 (or 4) PrimeNg Charts to refresh asynchronously?如何让 Angular 2（或 4）PrimeNg 图表异步刷新？
【发布时间】：2017-03-31 05:14:36
【问题描述】：

问题：如何让 PrimeNg 图表异步刷新？

场景：我有一个下拉菜单，我想根据用户选择刷新图表。

在了解了 Angular 更改检测以及我需要如何重新分配对象以查看数据已更改（而不是更新对象内的数据）后，我以为我知道了这个问题的答案)，但是在阅读了许多其他图表甚至尝试过之后，我了解到这个问题比我最初想象的要困难一些。

当我读到 ng2-charts 时，它也是从 chart.js 构建指令的，他们使用了有点笨拙的解决方案来解决 Angular 中的这个问题。以下是他们示例代码的摘录：

/**
* (My guess), for Angular to recognize the change in the dataset
* it has to change the dataset variable directly,
* so one way around it, is to clone the data, change it and then
* assign it;
**/

http://valor-software.com/ng2-charts/

即使他们对数据进行字符串化和重新解析以制作克隆副本并重新分配数据，并且似乎对他们有用，但我在 PrimeNg 上尝试了这种方法，但没有成功。

在其他示例中，他们对图表数据执行 .slice()，或直接访问 CHART_DIRECTIVES 并 .update() 图表。他们还等待绘制图表，直到异步加载数据，这仅在第一次加载并且不会解决我想要的行为。 Why should I practice Test Driven Development and how should I start?

我知道我的数据在幕后，我只需要知道如何刷新图表（即想出一种方法让 Angular 正确识别我已更改数据）。

【问题讨论】：

来自文档； primefaces.org/primeng/#/chart 为了让图表重绘自身，需要创建一个新的数据对象。在不创建新数组实例的情况下更改数组内容不会触发更改检测。
嗨 Cagatay Civici，感谢您的回复。我在下面回答了我自己的问题；这确实是为了帮助其他人（提取论坛对话）。正如所解释的，创建一个新阵列没有按预期运行。我可以在构造函数中设置数据，但是一旦加载图表就无法更改数据（例如，填充 this.changeData 然后设置 this.data = this.changeData 并让它重绘）。有可能（也很可能）我做错了什么，但下面的解决方案为我提供了我想要的东西，这是一种即时刷新图表的方法。谢谢达斯摩尔。

标签： asynchronous typescript charts primeng angular4

【解决方案1】：

我想要一个“真正的”解决方案，所以我找到了源头。我被告知在 4.0.0-rc.1 之后，图表的行为发生了变化。我安装了 4.0.0-rc.1 并按照以下示例使其按预期工作。

   changeData() {
            this.changedData = {
                labels: ['X','Y','Z'],
                datasets: [
                    {
                        data: [200, 200, 50],
                        backgroundColor: [
                            "#50f442",
                            "#f441c4",
                            "#4195f4"
                        ],
                        hoverBackgroundColor: [
                            "#50f442",
                            "#f441c4",
                            "#4195f4"
                        ]
                     }]
            }
            this.data = Object.assign({}, this.changedData);

}

https://github.com/primefaces/primeng/issues/2235

【讨论】：