1

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

这一切都在 Chrome 56.0、Firefox 51.0.1 和 Safari 10.0.2 中运行良好

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

我将告诉你它是如何在 Chrome 中运行的工作流程。

控制台日志

蓝色日志只是 JavaScript console.time()。HTTP.GET和GOT日志来自我们的 ApiService，用于每个触发的 API 请求。所以现在你看到第一次访问驾驶舱时我们得到了 Request allManagerData。这个请求获取我们需要的所有数据来填充驾驶舱上的图表和表格。然后我们有一些自动完成输入，它们绑定到 API。此 API 调用recordsearch获取自动完成输入的选择选项。当从自动完成输入中选择一个对象时，过滤逻辑开始。其实也是一样的，和初始加载一样，只是API请求得到了另外一个参数正确的filter值。在第二个allManagerData请求返回后，所有数据表和图表将被重新渲染。

这工作正常，但不是在 IE 中！这是从 IE11 进行完全相同的输入时的控制台。

在此处输入图像描述

您会看到在初始请求中正确调用了 rerender-Functions，但是对于第二个请求，它在第一次重新渲染时崩溃。不关心哪个是第一个，它是第一个DataTable.rerender()在这两种情况下（初始和过滤后）都将调用重新渲染$cockpit.rerenderDataTables();

$cockpit.rerenderDataTables = function () {
  if ($cockpit.dtStars.DataTable) {
    console.log('rerenderTable 1');
    $cockpit.dtStars.rerender();
  }
  if ($cockpit.dtNote10.DataTable) {
    console.log('rerenderTable 2');
    $cockpit.dtNote10.rerender();
  }
  if ($cockpit.dtYesNo.DataTable) {
    console.log('rerenderTable 3');
    $cockpit.dtYesNo.rerender();
  }
  if ($cockpit.dtProjects.DataTable) {
    console.log('rerenderTable 4');
    $cockpit.dtProjects.rerender();
  }
};

前端的数据表如下：

<table datatable="ng" dt-options="$cockpit.dtConfig.dtOptions" class="row-border stripe hover" dt-instance="$cockpit.dtStars">

我真的不知道.rerender()IE11 中的函数有什么问题。

有人也使用 Angular1 数据表并且在 IE 上重新渲染有问题吗？还是有其他想法？

谢谢！

4

0 回答 0