Is there a way to utilize a function from a service within a component? I am attempting to use the following code:
addProyecto(proyecto: Proyecto) {
this.proyectosCollection.add(this.proyecto);
}
However, I am encountering this error message:
TypeError: Cannot read property 'add' of undefined
at ProyectosService.addProyectoI'm looking to add a document to a Firestore collection. While I can achieve this directly in the component, I'm struggling to do so using a service.
Any suggestions?
proyecto.ts
export interface Proyecto {
titulo?: string;
destacado?: string;
descripcion?: string;
}
export interface ProyectoId extends Proyecto {
id: string
};
proyecto.service.ts
import { Injectable } from '@angular/core';
import { Proyecto } from './proyecto';
//Firestore
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ProyectosService {
proyecto: Proyecto = {};
proyectosCollection: AngularFirestoreCollection<Proyecto>;
proyectosObservable: Observable<Proyecto[]>;
constructor(private afs: AngularFirestore) {
}
getProyectos() {
this.proyectosCollection = this.afs.collection('proyectos', ref => ref.orderBy('titulo'));
this.proyectosObservable = this.proyectosCollection.snapshotChanges().map(arr => {
return arr.map(snap => {
const data = snap.payload.doc.data() as Proyecto;
const id = snap.payload.doc.id;
return { id, ...data };
});
});
return this.proyectosObservable;
};
addProyecto(proyecto: Proyecto) {
this.proyectosCollection.add(this.proyecto);
}
}
crear-proyecto.component.ts
import { Component, OnInit } from '@angular/core';
import { ProyectosService } from '../proyectos.service';
import { Proyecto } from '../proyecto';
import { Observable } from 'rxjs/Observable';
import { AngularFirestoreCollection, AngularFirestore } from 'angularfire2/firestore';
@Component({
selector: 'app-crear-proyecto',
templateUrl: './crear-proyecto.component.html',
styleUrls: ['./crear-proyecto.component.scss'],
providers: [ProyectosService]
})
export class CrearProyectoComponent implements OnInit {
proyecto: Proyecto = {};
proyectosCollection: AngularFirestoreCollection<Proyecto>;
proyectosObservable: Observable<Proyecto[]>;
constructor(private sp: ProyectosService, private afs: AngularFirestore) {}
ngOnInit() {
}
agregarProyecto() {
this.sp.addProyecto(this.proyecto)
}
}