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

Question

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

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

在了解了 Angular 变化检测以及我需要如何重新分配一个对象以使其看到数据已更改（而不是更新对象内的数据），但在阅读了许多其他图表并尝试使用它们之后，我了解到这个问题比我最初想象的要难一些。

当我读到 ng2-charts 时，它也从 charts.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 正确识别我已经更改了数据）。

Answer 1

我想要一个 "real" 解决方案，所以我找到了源头。我被告知在 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

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

How do you get Angular 2 (or 4) PrimeNg Charts to refresh asynchronously?

charts

asynchronous

typescript

primeng

angular4