Angular UI Grid: как заполнить выпадающий фильтр реальными данными из базы данных / бэкэнда - PullRequest
Новая
       23

Angular UI Grid: как заполнить выпадающий фильтр реальными данными из базы данных / бэкэнда

0 голосов
/ 22 марта 2019

Я боролся более 1 дня, пытаясь найти решение для предварительного заполнения раскрывающегося списка angular-ui-grid данными из бэкэнда.И да, я видел много похожих вопросов, но ни один из них не говорит о заполнении selectOption реальными данными из бэкэнда.

Он отлично работает с предопределенным массивом, например так: $scope.tiposArquivoSelecionados = [{ value: 1, label: 'First'}, { value: 2, label: 'Second'}, { value: 3, label: 'Third'}];

enter image description here

Но когда я пытаюсь заполнить selectOption данными, полученными из бэкэнда, selectOption не отображается.Взгляните:

enter image description here

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

Вот список нескольких обходных путей, которые я попытался (все не удалось), чтобы решить возможную проблему синхронизации:

  • обновить сетку после сбора данных;
  • поместите columnDefs внутри обратного вызова службы успеха
  • поместите ng-if в .html для отображения сетки, только если array.length> 0

Ни один из них не сработал = /

Объявление массива selectOptions: 

$scope.tiposArquivoGridSelectOptions = [];

Код из GridOptions.columnDefs: 

{
  field: 'controleArquivoId',
  name: 'Tipo de Arquivo',
  cellClass: 'ui-grid-cell-padding',
  enableFiltering: true,
  enableSorting: true,
  enableHiding: true,
  filter: {
    type: uiGridConstants.filter.SELECT,
    selectOptions: $scope.tiposArquivoGridSelectOptions,
  },
  sort: {
    direction: uiGridConstants.ASC,
    priority: 3
  }
},

В моем контроллере у меня есть метод init (),который вызывает сервис для сбора данных из бэкэнда и заполняет массив selectOption. 

AutorizacoesReenvioService.listarTiposArquivoPorAno(moment().year()).then(
  function (success) {
    var responseData = success.data;

    responseData.forEach(function(item) {
      $scope.tiposArquivoGridSelectOptions.push(
        {
          value: item.id,
          label: item.nomeArquivo
        }
      );
    });

    $scope.gridApi.core.refresh();
  },
  function (error) {
    console.error(success.data);
  }
);
...