Angular 数据表有时加载失败

Question

我有一个 angular 数据 table 有时无法加载并出现以下错误：

angular.js:13708 TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (jquery.dataTables.js:1197)
at Function.each (jquery-3.1.0.min.js:2)
at r.fn.init.each (jquery-3.1.0.min.js:2)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:1194)
at Function.each (jquery-3.1.0.min.js:2)
at r.fn.init.each (jquery-3.1.0.min.js:2)
at r.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at r.fn.init.$.fn.DataTable (jquery.dataTables.js:15134)
at Object.renderDataTable (angular-datatables.js:757)
at Object.hideLoadingAndRenderDataTable (angular-datatables.js:773)

我已经读过，如果没有头部或 body 或者 header 和 body 中的列数不匹配，就会发生这种情况。但我可以排除这两个问题，因为我的 table 有时会正确加载。

table 后面的数据从我的数据库中获取一次，并且在控制器中没有改变，所以我们可以假设，这也不会导致 col/row 不匹配的错误.

这是我的控制器：

angular.module('my-controllers').controller('tvShowGraficsController', ['$scope', '$q', 'SeasonService', 'TvShowService', 'UtilityService', 'DTOptionsBuilder',
    function ($scope, $q, SeasonService, TvShowService, UtilityService, DTOptionsBuilder) {

        var util = UtilityService;

        var filter_by_weight = function (link) {
            return (link.weight >= $scope.slider.min) && (link.weight <= $scope.slider.max);
        };

        var set_force_directed_data = function (data) {
            var force_data_all = data.force_directed_data,
                nodes = force_data_all.nodes,
                links = force_data_all.links;

            links = links.filter(filter_by_weight);

            $scope.slider.options.ceil = $scope.max_weight;

            $scope.forceDirectedData = {
                links: links,
                nodes: nodes
            };
        };

        TvShowService.GetTvShow().then(function (result) {
            $scope.tv_show = result.data;

            $scope.max_weight = Math.max.apply(Math, result.data.force_directed_data.links.map(function (o) {
                return o.weight;
            }));

            set_force_directed_data(result.data);

            var replica_lengths = $scope.tv_show.replicas_length_list;
            var length_list = [];

            for (var len in replica_lengths) {
                if (replica_lengths.hasOwnProperty(len)) {
                    length_list.push([+len.substring(1), replica_lengths[len], "Test"])
                }
            }

            length_list.sort(util.sort_by_key(0));

            $scope.tvShowReplicaLengths = [{
                key: "Quantity",
                bar: true,
                values: length_list.slice(1, 51)
            }];

            var reversed_length_list = jQuery.extend(true, [], length_list);
            reversed_length_list.sort(util.sort_by_key(1));

            $scope.tvShowReplicaLengthsDistribution = reversed_length_list;
        });

    ........

    $scope.dtOptions = DTOptionsBuilder.newOptions()
        .withDOM('frtip')
        .withButtons([
            {
                extend: 'csv',
                text: 'Download as CSV'
            },
            {
                extend: 'excel',
                text: 'Download as XLS'
            }
    ]);
}]

);

还有我的HTML：

<div class="col-md-12">
            <div class="panel panel-primary" ng-if="tv_show">
                <div class="panel-heading">
                    <h3 class="panel-title">Configuration Matrix</h3>
                    <span class="pull-right clickable"><i
                            class="glyphicon glyphicon-chevron-up"></i></span>
                </div>
                <div class="panel-body">
                    <table datatable="ng" dt-options="dtOptions" id="config-matrix" class="row-border hover">
                        <thead>

                        <th>Speaker/Season</th>
                        <th ng-repeat="n in [] | range:all_seasons.length+1">{{n}}</th>

                        </thead>
                        <tbody>
                        <tr ng-repeat="season in tv_show.configuration_matrix">
                            <td ng-repeat="values in season track by $index"
                                ng-class="setColor(values)">
                                {{values}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

进口：

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"
        integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.js"></script>

<script src="//cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>

<script src="bower_components/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/bootstrap/angular-datatables.bootstrap.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/tabletools/angular-datatables.tabletools.js"></script>

任何人都有想法，这里可能出了什么问题？

Answer 1

我发现了问题。对于 header，我在另一个函数中获取列值，然后用于获取 body 值。

由于这两个函数异步工作，有时会发生 body 的值在 header 的值准备好之前由 angular 加载。

所以对于面临类似问题的每个人：如果您在其他地方获取 table 头部的数据而不是 body 的数据，请在加载前检查两者是否准备就绪数据table.

Angular 数据表有时加载失败

Angular Datatables Sometimes Fails To Load

javascript

jquery

datatables

angularjs

angular-datatables