0

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

当我尝试将 JSON 放在本地并在 devextreme 数据网格中显示时，它显示完美。但是，当我使用 $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 中显示数据。

4

1 回答 1

1

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

小部件无法跟踪第三方在数据源中所做的更改。在这种情况下，要使小部件中的数据保持最新，请调用此方法。查阅列的数据源将与主数据源一起更新。

资料来源：文档

您需要做的就是按照此处描述的步骤，然后调用refresh小部件上的方法。

于 2018-07-09T09:13:39.673 回答