Javascript 在IE中更新数据后在Angular中重新加载Datatable

我的应用程序中有一个驾驶舱，有不同的D3图表和角度数据表，分布在三个选项卡上。 所有数据都来自API，并与Datapromises一起使用。 客户希望能够过滤数据，例如使用特定的projectNr。过滤也通过API完成，因此应用程序将使用正确的参数再次发送请求

这一切在Chrome 56.0、Firefox 51.0.1和Safari 10.0.2中都能正常工作

问题出现在Internet Explorer 11中（可能还有其他IE版本）

我会告诉你工作流是如何在Chrome中运行的

蓝色日志只是JavaScript

console.time（）

。

HTTP.GET

和

GET

日志来自我们的ApiService，用于每个激发的API请求。 现在您可以看到，第一次访问驾驶舱时，我们得到了请求

allManagerData

。这个请求获取我们填写驾驶舱图表所需的所有数据。 然后我们有一些自动完成的输入，它们被绑定到API。此API调用

recordsearch

获取自动完成输入的选择选项。 从自动完成输入中选择对象时，过滤器逻辑启动。它实际上是相同的，就像初始加载一样，只是API请求获得了另一个具有正确筛选值的参数。在第二个

allManagerData

请求返回后，所有数据表和图表都将重新提交

这很好，但不是在IE中！ 当IE11提供完全相同的输入时，这里是控制台

您可以看到，在初始请求中正确地调用了rerender函数，但在第二个请求中，它会在第一个rerender中崩溃。不管哪一个是第一个，它都是第一个

DataTable.rerender（）

在这两种情况下（初始和过滤后），都将使用

$caffick.rerenderDataTables（）调用rerender


$caffick.rerenderDataTables=函数（）{
if（$caffick.dtStars.DataTable）{
console.log（'rerenderTable 1'）；
$caffict.dtStars.rerender（）；
}
if（$caffick.dtNote10.DataTable）{
console.log（'rerenderTable 2'）；
$caffict.dtNote10.rerender（）；
}
if（$caffick.dtYesNo.DataTable）{
console.log（'rerenderTable 3'）；
$caffict.dtYesNo.rerender（）；
}
if（$caffick.dtProjects.DataTable）{
console.log（'rerenderTable 4'）；
$caffict.dtProjects.rerender（）；
}
};