如何加載來自http呼叫的動態列和行（列和記錄應該是動態的）在Ag-grid

Question

我有要求，像用戶將點擊任何表名，那麼我必須渲染相應的數據在AG網格。

我正在使用angular js 1.x.

我嘗試了所有的辦法

$scope.gridOptions = {}; 
$scope.loadTableInGrid = function (tablename) { 
    $http.post($scope.url + "/getPagingRecordImportedTable", { 'dbname': $stateParams.dbname, 'tableName': tablename, 'pageNumber': 1 }).success(

     function (response) { 

      $scope.names = response.records; 
      $scope.mdata = response.metadata; 

      console.log(response.records); 
      console.log(response.metadata); 

      var columnsize = 0; 
      for (var obj in $scope.mdata) { 
       if ($scope.mdata[obj]['columnsize'] > 20) { 
        columnsize = 20; 
       } else { 
        columnsize = $scope.mdata[obj]['columnsize']; 
       } 

       $scope.columnDefs.push({ 
        "headerName": $scope.mdata[obj]['columnname'], 
        "field": $scope.mdata[obj]['columnname'] 
       }); 
      } 


      var gridDiv = document.querySelector('#myGrid'); 
      alert(gridDiv); 
      new agGrid.Grid(gridDiv, $scope.gridOptions); 
      $scope.gridOptions.api.setColumnDefs($scope.columnDefs); 
      $scope.gridOptions.api.setRowData(response.records); 
      $scope.gridOptions.api.refreshView(); 



      console.log("-----------Data received"); 
     }).error(function (data) { 
      alert(data); 
     }); 
    } else { 
     $scope.reset(); 
     $scope.resetGridTableName(); 

    } 
    console.log(tablename); 
}; 

按表名，我必須加載列和電網動態記錄兩者。 但它總是說「加載」，並沒有任何渲染。

如果有任何示例請參閱或重構我的代碼。

Answer 1

我可以在你的代碼中看到1個if和2個else語句......你錯過了什麼......？不管怎樣， Angular ajax方法返回一個Promise，所以它應該和.then/.catch一起使用，而不是.success/.error

我會寫更多這樣的：（未經測試）（小心ES6箭頭fn和const）

$scope.gridOptions = {}; 
$scope.loadTableInGrid = tablename => { 
    const url = $scope.url + "/getPagingRecordImportedTable" 
    const formData = { 
     dbname: $stateParams.dbname, 
     tableName: tablename, 
     pageNumber: 1 
    } 

    console.log(tablename); 

    $http.post(url, formData) 
    .then(response => { 
     $scope.names = response.records; 
     $scope.mdata = response.metadata; 

     console.log(response.records); 
     console.log(response.metadata); 

     var columnsize = 0; 
     for (var obj in $scope.mdata) { 
      if ($scope.mdata[obj]['columnsize'] > 20) { 
       columnsize = 20; 
      } else { 
       columnsize = $scope.mdata[obj]['columnsize']; 
      } 

      $scope.columnDefs.push({ 
       headerName: $scope.mdata[obj]['columnname'], 
       field: $scope.mdata[obj]['columnname'] 
      }); 
     } 

     var gridDiv = document.querySelector('#myGrid'); 
     alert(gridDiv); 
     new agGrid.Grid(gridDiv, $scope.gridOptions); 
     $scope.gridOptions.api.setColumnDefs($scope.columnDefs]); 
     $scope.gridOptions.api.setRowData(response.records); 
     $scope.gridOptions.api.refreshView(); 

     console.log("-----------Data received"); 

    }).catch(err => { 
     console.log("Error: ", err) 
    }) 
};