使用 Firebase 数据在 AngularJS 中填充 Material 设计数据 Table

Question

我正在尝试使用 this module of AngularJS to create a table with information stored in Firebase. The problem is that I can not get the table populated with the data obtained in Firebase. At the moment of loading the page, the progress bar appears, but when it finishes receiving the Firebase information and the progress bar ends, nothing is shown in the table. It remains as you can see in the following image，它还显示了信息是如何加载的，因为它是由控制台打印的。

table的结构如下：

 <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.

中看到预期的行为

Answer 1

尝试

  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 秒）。因此，我们 return deferred.promise 然后将解析值（将在 n 秒后出现）分配给 deferred.resolve(data) 并且类似地分配给 rejection.

然后$scope.pacientes放在then()函数下

使用 Firebase 数据在 AngularJS 中填充 Material 设计数据 Table

Fill Material Design Data Table in AngularJS with Firebase data

datatable

angularjs

firebase

angularjs-material