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

从服务Firestore获取功能

1 个答案: