Devexpress AngularJS 피벗에 대한 동적 데이터 얻기

Question

내 AngularJS 웹 앱에서 devexpress로 피벗을하고 있습니다. 특히, 나는 필드 선택자 인 을 사용하고있다 : https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/

이 예제에서 정적 데이터가있다. 서버에서 가져와야합니다. 그래서, 나는 이것을 썼다.

$scope.testData = null; 
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ 
    fields: [{ 
    caption: "Nome", 
    dataField: "fullName", 
    area: "row" 
    }, { 
    caption: "Country", 
    dataField: "country", 
    area: "column" 
    }, { 
    caption: "Count", 
    dataField: "countOne", 
    dataType: "number", 
    summaryType: "sum", 
    area: "data" 
    }], 
    store: $scope.testData 
    }); 

    $scope.pivotGridOptions = { 
    allowSortingBySummary: true, 
    allowSorting: true, 
    allowFiltering: true, 
    showBorders: true, 
    dataSource: $scope.pivotGridDataSource, 
    fieldChooser: { 
     enabled: false 
    } 
    }, 

    $scope.fieldChooserOptions = { 
     dataSource: $scope.pivotGridDataSource, 
     texts: { 
      allFields: "All", 
      columnFields: "Columns", 
      dataFields: "Data", 
      rowFields: "Rows", 
      filterFields: "Filter" 
      }, 
      width: 400, 
      height: 400, 
      bindingOptions: { 
      layout: "layout" 
      } 
     }; 

    // Now I call the function to retrieve data 
    $scope.getTestData =() => { 
    // I call the server and save the data 
    ........ 
     $scope.testData = result; 
    } 

문제는 테이블을 호출 한 후에도 여전히 비어 있다는 것이다. "데이터 없음"이라고 쓰여 있습니다. 왜? 나는 또한 서버를 호출 한 후

$scope.pivotGridDataSource.load(); 
$scope.pivotGridDataSource.reload(); 

을 쓰려고 시도했지만 아직 작동하지 않습니다.

Answer 1

문제는 JQuery와, 그래서 아래의 코드를 참조하십시오이

var dataStore = new DevExpress.data.CustomStore({ 
       load: function (loadOptions) { 
        var d = $.Deferred(); 
        $.ajax({ 
         url: UrlApi, 
         method: "GET", 
        }).done(function (result) { 
         d.resolve(result, { 
         }); 
        }); 
        return d.promise(); 
       }, 
       key: "Id", 
      }); 


$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ 
    ....... 
    store: dataStore 
    }); 

그런 짓을, 상점에 있지만 AngularJS와 기본적으로 같은

var dataStore = new DevExpress.data.CustomStore({ 
       load: function (loadOptions) { 
        var d = $.Deferred(); 
        $.ajax({ 
         url: UrlApi, 
         method: "GET", 
        }).done(function (result) { 
         d.resolve(result, { 
         }); 
        }); 
        return d.promise(); 
       }, 
       key: "Id", 
      }); 
     $("#pvtSales").dxPivotGrid({ 
      showBorders: true, 
      "export": { 
       enabled: true, 
       fileName: "Sales" 
      }, 
      dataSource: { 
       fields: [{ 
        caption: "Fecha", 
        dataField: "maeFecha", 
        width: 350, 
        area: "row" 
       }, { 
        caption: "Nombre", 
        dataField: "maeNombre", 
        dataType: "number", 
        summaryType: "count", 
        area: "data" 
       }, { 
        dataField: "maeGestion", 
        width: 350, 
        area: "column" 
       }], 
       store: dataStore 
      } 
     }); 

입니다 그리고 결과를 볼