从服务 Firestore 获取功能

Question

如何在服务中的组件中使用函数？我正在尝试使用：

 addProyecto(proyecto: Proyecto) {
    this.proyectosCollection.add(this.proyecto);
}

但它返回此错误：TypeError: Cannot read property 'add' of undefined at ProyectosService.addProyecto

我想要的是在 Firestore 的集合中添加一个文档，我可以从同一个组件中做到这一点，但我不能使用服务来做到这一点。

有什么想法吗？

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)
    }
}

Answer 1

您的this.proyectosCollection 未定义，因为您在函数getProyectos() 中定义了它。在调用此函数之前，它将是未定义的。

将您的收藏移至 proyecto.service.ts

中的 ngOnInit()

ngOnInit() {
    this.proyectosCollection = this.afs.collection('proyectos', ref => ref.orderBy('titulo'));
}

你的 get 函数看起来像这样

getProyectos() {
    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()