使用 Firebase 数据填充 AngularJS 中的 Material Design 数据表答案

【问题标题】：Fill Material Design Data Table in AngularJS with Firebase data使用 Firebase 数据填充 AngularJS 中的 Material Design 数据表
【发布时间】：2018-05-04 18:09:47
【问题描述】：

我正在尝试使用 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);
  };

我不确定我是否正确使用了 Promise，也不确定我是否将从 Firebase 获得的信息正确分配给变量 $ scope.patients。您可以在以下demo 中看到预期的行为。

【问题讨论】：

标签： angularjs firebase datatable angularjs-material

【解决方案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()函数下

【讨论】：