Angular Datentabellen manchmal nicht laden

Question

ich einen Winkeldatentabelle haben, die manchmal nicht nur mit dem folgenden Fehler laden:

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) 

ich schon gelesen, dass dies geschehen kann, wenn kein Kopf ist oder kein Körper oder in Fall einer Fehlübereinstimmung in der Anzahl der Spalten in Header und Body. Aber ich kann diese zwei Probleme ausschließen, da meine Tabelle manchmal richtig geladen wird.

Die Daten hinter der Tabelle werden einmal aus meiner Datenbank geholt und ändern sich nicht in der Steuerung, so dass wir davon ausgehen können, dass dies auch keinen Fehler mit dem col/row missmatch verursachen kann.

Hier mein Controller:

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' 
      } 
    ]); 
}] 

);

Und mein 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> 

Importe:

<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> 

jemand eine Idee, was hier passiert könnte?

Answer 1

Ich habe das Problem gefunden. Für den Header bekomme ich die Spaltenwerte in einer anderen Funktion, dann benutze ich um die Körperwerte zu bekommen.

Da beide Funktionen asynchron arbeiten, kommt es manchmal vor, dass die Werte für den Körper von angular geladen werden, bevor die Werte für den Header bereit sind.

Also für alle mit einem ähnlichen Problem: Wenn Sie die Daten für den Kopf der Tabelle woanders erhalten als Sie Ihre Daten für den Körper erhalten, überprüfen Sie, ob beide bereit sind, bevor Sie die Datentabelle laden.