Интеграция Ionic (Angularjs) и Devextreme Datagrid не смогла отобразить данные из $ http JSON - PullRequest
Новая
       20

Интеграция Ionic (Angularjs) и Devextreme Datagrid не смогла отобразить данные из $ http JSON

0 голосов
/ 03 июля 2018

Я разрабатываю ионное приложение, используя Angularjs. В моем приложении я должен интегрироваться с компонентом devextreme, таким как Datagrid.

Когда я попытался поместить JSON локально и отобразить в сетке данных devextreme, он отобразился идеально. Однако, когда я получаю данные JSON из веб-сервисов с помощью $ http и отображаю их в 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.

1 Ответ

0 голосов
/ 09 июля 2018

Это проблема времени. Вы должны вызвать метод refresh после асинхронной загрузки данных в вашу сетку.

Виджет не может отслеживать изменения, сделанные в источнике данных третьей стороной. В этом случае для обновления данных в виджете вызовите этот метод. Источники данных столбцов поиска будут обновлены вместе с основным источником данных.

Источник: Документация

Продается все, что вам нужно сделать, это выполнить шаги, описанные здесь , а затем вызвать метод refresh в виджете.

...