Question

我正在尝试使用AngularJS的this模块来创建一个包含存储在Firebase中的信息的表。问题是我无法使用Firebase中获得的数据填充表格。在加载页面时，会出现progress bar，但是当它完成接收Firebase信息并且进度条结束时，表格中不会显示任何内容。它仍然可以在following image中看到，它还显示了信息的加载方式，因为控制台正在打印信息。

该表具有以下结构：

 <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);
  };

我不确定我是否正确使用了promises，也不确定我是否正确地将从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秒）。因此，我们返回deferred.promise，然后将已解析的值（将在n秒之后）分配给deferred.resolve(data)，同样分配给rejection。

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

下

使用Firebase数据填充AngularJS中的材料设计数据表

1 个答案: