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

され、その結果を参照してください