1

Me gustaría saber cómo puedo mostrar la información contenida en la imagen adjunta, porque lo he intentado de muchas formas pero no hay manera.

Estoy usando cloud firestore, y de momento obtengo lo siguiente:

interface HourTask {
  inicio: string;
  fin: string;
}

todo: Observable<HourTask[]>;

 this.todo = this.asf.collection<HourTask>('extraHours/SAW5riljv0EAU1bp1Dm6/Fecha', ref => {
  return ref;
}).snapshotChanges()
  .map(actions => {
    return actions.map(a => {
      //console.log(a);
      const data = a.payload.doc.data() as HourTask;
      // Me gustaría poder devolver evento, inicio y fin de cada tarea. Adjunto foto
      return { event, inicio, fin };
    })
  });

Muchas gracias.

introducir la descripción de la imagen aquí

Captura del error en WebStorm:

introducir la descripción de la imagen aquí

Captura cuando lanzo la app:

introducir la descripción de la imagen aquí

2
  • No queda claro en la pregunta lo que quieres conseguir o qué es lo que te falla: ¿Tu componente no obtiene los datos? ¿La llamada a firebase falla? Commented el 30 mar. 2018 a las 11:59
  • Muchas gracias por contestar. He modificado la pregunta para que se entienda mejor. Commented el 30 mar. 2018 a las 17:32

2 respuestas 2

1

Mi solución al final fue la siguiente:

this.todoCollection = this.asf.collection('extraHours/SAW5riljv0EAU1bp1Dm6/Fecha');
this.todoCollection.snapshotChanges().subscribe(todoList => {
    this.todo = todoList.map(item => {
        const data = item.payload.doc.data() as HourTask;

        return {
            inicio: data['Inicio'],
            fin: data['Fin']
        }
    })
})
1
  • 1
    Hola Alejandro, me alegro que encontrases tu respuesta y la compartieses con el resto de la comunidad. ¿Podrías explicar qué cambiaste y cómo (y dónde) iría este código? Gracias.
    – Alvaro Montoro
    Commented el 1 abr. 2018 a las 4:56
0

En tu función map tienes lo siguiente:

actions => {
  return actions.map(a => {
  const data = a.payload.doc.data() as HourTask;
  // Me gustaría poder devolver evento, inicio y fin de cada tarea. Adjunto foto
  return { event, inicio, fin };
}

Veo dos problemas:

  • Declaras una constante data, donde guardas el objeto HourTask, pero luego no lo usas para devolver los valores.
  • Viendo la imagen cuando depuras, tu definición de la interfaz HourTask no coincide con lo que hay en data.

En tu función tendrías que hacer algo como

actions => {
    return actions.map(a => {
      const data = a.payload.doc.data() as HourTask;
      const keys= Object.keys(data); // ['Indianos', 'Sardina']
      return keys.map((key)=> ({ event: key, inicio: data[key].Inicio, fin: data[key].Fin}));
    }
1
  • Buenos días.En primer lugar, muchas gracias por contestar. La función la he dejado así y cuando depuro me funciona, pero en el editor de código (uso Webstorm) me sale un error: actions => { return actions.map(a => { const data = a.payload.doc.data() as HourTask; const keys= Object.keys(data); return keys.map((key)=> ({ event: key, inicio: data[key]['Inicio'], fin: data[key]['Fin']})); }) Añado una captura del error en el mensaje original. Tampoco me muestra info cuando lanzo la app (añado captura) Commented el 31 mar. 2018 a las 9:53

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.