Estoy intentando usar este módulo de AngularJS para crear una tabla con información almacenada en Firebase. El problema es que no consigo que la tabla se pueble con los datos obtenidos en Firebase. En el momento de cargar la página aparece la barra de progreso, pero cuando termina de recibir la información de Firebase y la barra de progreso termina, no se muestra nada en la tabla. Se queda tal y como se puede ver en la siguiente imagen, en ella también se ve cómo la información si carga, ya que se está imprimiendo por consola.
La tabla tiene la siguiente estructura:
<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>
Y el código con el que accedo a Firebase para obtener la información es:
$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);
};
No tengo claro que esté usando correctamente las promesas, ni tampoco que esté asignando correctamente la información obtenida de Firebase a la variable $scope.pacientes
.
El comportamiento esperado es el de la siguiente demo.