Заполните Таблицу проектных данных материала в AngularJS данными Firebase - PullRequest
Новая
       7

Заполните Таблицу проектных данных материала в AngularJS данными Firebase

0 голосов
/ 04 мая 2018

Я пытаюсь использовать этот модуль AngularJS для создания таблицы с информацией, хранящейся в Firebase. Проблема в том, что я не могу заполнить таблицу данными, полученными в Firebase. В момент загрузки страницы появляется индикатор выполнения , но когда он заканчивает получать информацию Firebase и индикатор выполнения завершается, в таблице ничего не отображается. Он остается, как вы можете видеть на следующем изображении , он также показывает, как информация загружается, поскольку она печатается на консоли.

Таблица имеет следующую структуру: 

 <md-table-container>
  <table md-table md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" ng-model="selected" md-progress="promise">
    <thead md-head md-order="query.order" md-on-reorder="cargarPacientes">
    <tr md-row>
      <th md-column md-order-by="nombre"><span>Nombre</span></th>
      <th md-column md-order-by="type"><span>Fecha Nacimiento</span></th>
    </tr>
    </thead>
    <tbody md-body>
    <tr md-row md-select="paciente" md-on-select="logItem" md-auto-select="options.autoSelect" ng-repeat="paciente in pacientes.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
      <td md-cell>{{paciente.nombre + " " + paciente.apellido}}</td>
      <td md-cell>{{paciente}}</td>
    </tr>
    </tbody>
  </table>
</md-table-container>

И код, с помощью которого я получаю доступ к Firebase для получения информации: 

$scope.pacientes = cargarPacientes();

  function cargarPacientes() {
    var deferred = $q.defer();
    $scope.promise = deferred.promise;
    let pacientesMostrar = {};
    let pacientes = [];
    let database = firebase.database();
    let pacientesRef = database.ref('pacientes');
    $timeout (function () {
      pacientesRef.once('value').then(function(paciente) {
        paciente.forEach(function (pacienteHijo) {
          let childData = pacienteHijo.val();
          childData['key'] = pacienteHijo.key;
          pacientes.push(childData);
        });
        pacientesMostrar['count'] = pacientes.length;
        pacientesMostrar['data'] = pacientes;
        console.log(pacientesMostrar);
        deferred.resolve();
        return pacientes;
      }, function (error) {
        console.error(error);
        deferred.reject();
      });

    }, 2000);
  };

Я не уверен, что правильно использую обещания или правильно присваиваю информацию, полученную из Firebase, переменной $ scope.patients. Ожидаемое поведение вы можете увидеть в следующем demo .

1 Ответ

0 голосов
/ 05 мая 2018

Попробуйте 

  cargarPacientes().then(function(data){
      $scope.pacientes = data;
  })

  function cargarPacientes() {
    var deferred = $q.defer();
    let pacientesMostrar = {};
    let pacientes = [];
    let database = firebase.database();
    let pacientesRef = database.ref('pacientes');
    $timeout (function () {
      pacientesRef.once('value').then(function(paciente) {
        paciente.forEach(function (pacienteHijo) {
          let childData = pacienteHijo.val();
          childData['key'] = pacienteHijo.key;
          pacientes.push(childData);
        });
        pacientesMostrar['count'] = pacientes.length;
        pacientesMostrar['data'] = pacientes;
        console.log(pacientesMostrar);
        deferred.resolve(pacientesMostrar);

      }, function (error) {
        console.error(error);
        deferred.reject(error);
      });

    }, 2000);
    return deferred.promise
  };

То, как вы реализуете promise, неверно.

Обещание - это то, что не происходит сразу, скорее оно асинхронно (может занять от 1 секунды до n секунд). Таким образом, мы возвращаем deferred.promise и затем присваиваем разрешенные значения (которые появятся через n сек) для deferred.resolve(data) и аналогично для rejection.

А затем $scope.pacientes ставится под then() функцию

...