Ionic (Angularjs) 和 Devextreme Datagrid 的集成，无法显示来自 $http JSON 的数据

Question

我正在使用 Angularjs 开发离子应用程序。在我的应用程序中，我必须与 Datagrid 等 devextreme 组件集成。

当我尝试将 JSON 放在本地并在 devextreme datagrid 中显示时，它显示完美。但是，当我使用 $http 从 Web 服务获取 JSON 数据并显示在 devextreme Datagrid 中时。它未能显示它，但是当我控制台输出数据时，我能够获取数据但无法在 Devextreme Datagrid 组件中显示它。

以下是我的示例代码

html代码

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <div dx-data-grid="{
        dataSource: customers,
        keyExpr: 'ID',
        columns: ['toponymName', 'fcodeName', 'population'],
        sorting: { mode: 'single' },
        pager: { visible: true },
        paging: { pageSize: 10 },
        editing: {
            editEnabled: false,
            editMode: 'row',
            insertEnabled: false,
            removeEnabled: false
        },
        allowColumnReordering: true,
        allowColumnResizing: true,
        filterRow: { visible: true },
        searchPanel: { visible: false },
        selection: { mode: 'single' }
    }"></div>
  </ion-content>
</ion-view>

控制器代码

.controller('DashCtrl', function($scope,  $http) {

    $http({
         method : 'GET',
         url : 'http://10.194.121.224/MobileGo_WebAPI/api/MST_CUSTOMER',
         headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
          }
    }).then(function successCallback(response) {
        $scope.customers = response.data;
        console.log(response.data)
    }, function errorCallback(response) {
        console.log(response.statusText);
    });

    // var customers = [{
    //     ID: 1,
    //     CompanyName: "Super Mart of the West",
    //     CompanyHolder: "Chan Yoong Hon",
    //     City: "Bentonville",
    //     State: "Arkansas"
    // }, {
    //     ID: 2,
    //     CompanyName: "Electronics Depot",
    //     CompanyHolder: "Lee Kam Fei",
    //     City: "Atlanta",
    //     State: "Georgia"
    // }];
    // $scope.customers = customers;

})

就像我在注释代码中尝试的那样，JSON 文件的硬编码。它能够成功显示。如果我从 $http 获取它，它无法显示 dx-data-grid 中的数据。

Answer 1

这是时间问题。将数据异步加载到网格后，您必须调用 refresh 方法。

The widget cannot track changes made in the data source by a third party. To bring data in the widget up to date in this case, call this method. Data sources of lookup columns will be updated along with the main data source.

来源：Documentation

Soll 您需要做的就是按照描述的步骤进行操作 here，然后调用小部件上的 refresh 方法。

Ionic (Angularjs) 和 Devextreme Datagrid 的集成，无法显示来自 $http JSON 的数据

Integration of Ionic (Angularjs) and Devextreme Datagrid, failed to display data from $http JSON

angularjs

devextreme

angularjs-http

ionic-v1

dx-data-grid