onRegisterApi Funktion wird nicht aufgerufen, ui-grid

Question

Ich versuche, die Tabelle mit Ui-Grid anzuzeigen. Die Tabelle wird ordnungsgemäß angezeigt, ohne die Funktion onRegisterApi aufzurufen. Ich habe es nicht einmal bemerkt, da die Tabellenanzeige funktionierte, bis ich die Methode vm.gridApi.core.refresh() verwenden wollte. Als ich diese Methode hinzufügte, gab es mir vm.gridApi undefined Fehler.

Mein Controller sieht wie folgt aus:

function userEventData (resp) { 
      $http({ 
       method: "GET", 
       url: resp.results["@href"] 
      }).success(function (responseData) { 
       logger.info("userEventData responseData", responseData); 
       vm.gridOptions.data = responseData; 
       logger.info("gridOptions", vm.gridOptions.data); 
       poulateGrid(); 
       //return responseData; 
      }); 
     } 

function populateGrid() { 
      logger.info("populateGrid function activated"); 
      vm.dateFormat = "medium"; 
      var temp = vm.gridOptions.data; 
      vm.gridOptions = { 
       enableColumnMenu: true, 
       enableFiltering: true, 
       enableSelectAll: true, 
       rowTemplate: gridService.getRowTemplate(), 
       excludeProperties: ["meta"], 
       onRegisterApi: function (gridApi) { 
        logger.info("onRegisterApi activated"); 
        vm.gridApi = gridApi; 
        logger.info("vm.gridApi when defined", vm.gridApi); 
        vm.gridApi.grid.registerRowsProcessor(vm.singleFilter(), 200); 
       }, 
       columnDefs: [ 
        { 
         field: "sun", 
         displayName: "Init User", 
         allowCellFocus: false, 
         enableGrouping: true, 
        }, 
        { 
         field: "dun", 
         displayName: "Target User", 
         allowCellFocus: false, 

        }, 
        { 
         field: "evt", 
         displayName: "Name", 
         allowCellFocus: false 
        }, 
        { 
         field: "dip", 
         displayName: "What is affected", 
         allowCellFocus: false 
        }, 
        { 
         field: "det", 
         displayName: "Time created", 
         allowCellFocus: false, 
         cellFilter: "date:grid.appScope.vm.dateFormat" 
        } 
       ] 

      } 

html

<div ui-grid="vm.gridOptions" style="padding-top: 1%;">

Jede Idee, warum dies geschieht? Vielen Dank!

Answer 1

Sie rufen die Funktion populateGrid() auf, nachdem Sie vm.gridOptions.data bereits mit den Daten Ihrer HTTP-Anforderung initialisiert haben.

Versuchen Sie Ihren Code Neuordnen, so etwas zu tun:

vm.gridOptions = {}; // must have gridOptions defined first 

function userEventData (resp) { 
      $http({ 
       method: "GET", 
       url: resp.results["@href"] 
      }).success(function (responseData) { 
       logger.info("userEventData responseData", responseData); 
       logger.info("gridOptions", vm.gridOptions.data); 
       populateGrid(); // call this first 
       vm.gridOptions.data = responseData; // now you can load the data 
       //return responseData; 
      }); 
     } 

function populateGrid() { 
      logger.info("populateGrid function activated"); 
      vm.dateFormat = "medium"; 
      // var temp = vm.gridOptions.data; // this wont exist yet 
      vm.gridOptions = { 
       enableColumnMenu: true, 
       enableFiltering: true, 
       enableSelectAll: true, 
       rowTemplate: gridService.getRowTemplate(), 
       excludeProperties: ["meta"], 
       onRegisterApi: function (gridApi) { 
        logger.info("onRegisterApi activated"); 
        vm.gridApi = gridApi; 
        logger.info("vm.gridApi when defined", vm.gridApi); 
        vm.gridApi.grid.registerRowsProcessor(vm.singleFilter(), 200); 
       }, 
       columnDefs: [ 
        { 
         field: "sun", 
         displayName: "Init User", 
         allowCellFocus: false, 
         enableGrouping: true, 
        }, 
        { 
         field: "dun", 
         displayName: "Target User", 
         allowCellFocus: false, 

        }, 
        { 
         field: "evt", 
         displayName: "Name", 
         allowCellFocus: false 
        }, 
        { 
         field: "dip", 
         displayName: "What is affected", 
         allowCellFocus: false 
        }, 
        { 
         field: "det", 
         displayName: "Time created", 
         allowCellFocus: false, 
         cellFilter: "date:grid.appScope.vm.dateFormat" 
        } 
       ] 
      } 
      }