Can't assign value to var using Observable, Firebase (Angular 6)

Question

I cant assign value to any var from the return of the subscribe, my observable name is reportess and I trying to assign the value to var in the same service that I declared the observable from external component. In the other hand I can print by log the return of the subscribe.

Service:

import { Injectable, Input } from '@angular/core';
//Archivo json
import _reportes from "../archivos json/reportes.json";
import _vacio from "../archivos json/vacio.json";
//Exportador pdf
import * as jsPDF from 'jspdf';
//firebase

import {AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from '@angular/fire/firestore';
import {Observable} from 'rxjs'
import {Subject} from 'rxjs'


@Injectable({
 providedIn: 'root'
})
export class ServicesService {
     @Input() reportes
    coleccionReporte: AngularFirestoreCollection<Reporte>;
    reportess: Observable<Reporte[]>;
    reportesMargis;
    reportesDoc: AngularFirestoreDocument<Reporte>;
    ColeccionDeReportes;
    Reporte;

    constructor(public firebase:AngularFirestore) { 
    this.reportess = firebase.collection('reporte').valueChanges(); 
    console.log(this.reportes)
}

Component:

constructor(private reportesServices:ServicesService) { }
    ngOnInit() {
    this.reportesServices.reportess.subscribe(data => {this.reportesServices.reportes = data} ); //dont work  
    this.reportesServices.reportess.subscribe(data => {console.log(data)} ); //work
}

How do you know that the first example doesn't work? Because console.log(this.reportes) in the last line of ServicesService shows you undefined? — Sergey Mell
– Sergey Mell, Commented Feb 18, 2019 at 12:37

Amit Chigadani · Accepted Answer · 2019-02-18 11:40:31Z

1

You cannot use @Input() for service properties. Just remove that.

It should be used only in a component or a directive.

export class ServicesService {
      reportes;  // removed input decorator
      coleccionReporte: AngularFirestoreCollection<Reporte>;
      reportess: Observable<Reporte[]>;
      reportesMargis;
      reportesDoc: AngularFirestoreDocument<Reporte>;
      ColeccionDeReportes;
      Reporte;



     ..........
}

answered Feb 18, 2019 at 11:40

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergey Mell · Accepted Answer · 2019-02-18 12:55:14Z

0

As @Amit Chigadani have noticed above you have to remove @Input decorator from your reportes property. It is public and will be accessible from ServicesService instance. So, the code

this.reportesServices.reportess.subscribe(data => {
    this.reportesServices.reportes = data
});

should work. Your console.log(this.reportes) shows undefined because this line is executed before the observable resolves.

However, such logic looks a bit weird because the service stuff is executed outside of service. I'd propose to refactor your service code a bit:

import {tap} from 'rxjs/operators';

this.reportess = firebase.collection('reporte').valueChanges().pipe(
    tap(data => this.reportes = data)
);

so the storing will be handled inside the service.

edited Feb 18, 2019 at 12:55

answered Feb 18, 2019 at 12:45

Sergey Mell

8,0501 gold badge29 silver badges53 bronze badges

1 Comment

Sergey Mell Over a year ago

You should import it (import {tap} from 'rxjs/operators';). I've edited my answer. But this is just refactoring. The original code above should work either. Put your console log into a timeout to be sure that it is executed after the observable completes and you will see setTimeout(() => console.log(this.reportes), 5000). This is a dirty trick but just to show you.

MapacheMuerto · Accepted Answer · 2019-02-19 08:57:02Z

SOLVED! Thanks for all the answers. I declared the 'test' with 'let'. In the service I declared a method to force the cast of the recived data to my objects.

component:

 constructor(private reportesServices:ServicesService) { }

      ngOnInit() {
        let test: any

        this.reportesServices.reportess.subscribe(
          data => {
            test = data;
            this.reportesServices.setReporters(test);
          });         
      }

Service:

setReporters(data){
    this.reportes  = [];
    for(let i = 0; i < data.length; i++)
    {
      let reporte:Reporte = {
        titulo: data[i].titulo,
        fecha: data[i].fecha,
        ruta: data[i].ruta,
        prioridad: data[i].prioridad,
        funcion: data[i].funcion,
        comentario: data[i].comentario,
        solucionado: data[i].solucionado    
      };
      this.reportes.push(reporte)
    }  
  }

Collectives™ on Stack Overflow

Can't assign value to var using Observable, Firebase (Angular 6)

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related