2

Estoy usando angularfire2 para comunicarme con el backend Firebase de Google. Este es el código:

import {Component} from '@angular/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  selector: 'app',
  templateUrl: `
  <ul>
    <li *ngFor="let item in items | async">
      {{ item.name }}
    </li>
  </ul>
  `,
})
class AppComponent {
  items: Observable<any>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
}

La instruccion af.database.list('items') se toma unos segundos en extraer la información desde Firebase.

¿Hay alguna forma de saber en que momento se termina de extraer la información?

Si supiera cuando la información ha llegado puedo mostrar una "barra de carga" hasta que los datos lleguen.

Gracias!

2
  • Creo que tienes un error en tu código, en lugar de this.item = af.database.list('/items'); debería ser this.items = ...
    – devconcept
    Commented el 15 jul. 2016 a las 13:54
  • Si, hay un error. Ya he actualizado el código, gracias.
    – Matias999
    Commented el 15 jul. 2016 a las 14:26

1 respuesta 1

2

Lo que te devuelve af.database.list('/items') es una clase llamada FirebaseListObservable que hereda de RxJS Observable por lo que todos los métodos de los observables están disponibles para usarse.

La forma más simple es iniciando con la barra de progreso activa y quitarla cuando te llega cualquier cosa. Para esto puedes usar el metodo subscribe

import {Component} from '@angular/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';
// Implementa la barra de progreso como un componente
import {ProgressBar} from 'myprogressbar';

@Component({
  selector: 'app',
  templateUrl: `
  <ProgressBar [active]="loading" />
  <ul>
    <li *ngFor="let item in items | async">
      {{ item.name }}
    </li>
  </ul>
  `,
  directives: [ProgressBar]
})
class AppComponent {
  item: Observable<any>;
  loading: boolean;
  constructor(af: AngularFire) {
    this.loading = true;
    this.items = af.database.list('/items');

    this.items.subscribe(data => {
        this.loading = false;
    });
  }
}
2
  • Lo voy a probar. Gracias!
    – Matias999
    Commented el 15 jul. 2016 a las 16:13
  • Gracias @devconcept, funciona genial.
    – Matias999
    Commented el 16 jul. 2016 a las 16:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.