将Firebase值从服务返回到角度为6的组件

Question

我正在使用angularfire2创建一个具有angular 6和firebase的应用程序，我选择使用firestore，其中有一个名为page的集合，如图像中所示：

基本上，我创建了一个服务-“ PagesService”，其中有一个函数可以返回我发送的页面的数据。我正在尝试使用getPage将值返回到我的组件，并将它们分配给表单，我尝试过的其他方法都没有，只返回了我无法工作的“可观察”值，没有人知道我可以做什么？

完整代码，服务：

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class PagesService {
  private pagesCollection: AngularFirestoreCollection<any>;
  private page: AngularFirestoreDocument<any>;

  constructor(private afs: AngularFirestore) {
    this.pagesCollection = afs.collection('pages');
  }

  getPage(pageName: string) {
    return this.afs.doc<any>('pages/${pageName}').valueChanges();
  }

  addPages(pageName: string, pageForm: any) {
    this.pagesCollection.doc(pageName).set(pageForm.value);
  }
}

我的组件

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';

import { PagesService } from '../../services/pages.service';

@Component({
  selector: 'app-quem-somos',
  templateUrl: './quem-somos.component.html',
  styleUrls: ['./quem-somos.component.scss']
})
export class QuemSomosComponent implements OnInit {
  pageForm: FormGroup;
  pageName: string = "wo-we-are";
  page: any;

  constructor(private pagesService: PagesService, private fb: FormBuilder) { }

  ngOnInit() {
    this.page = this.pagesService.getPage(this.pageName);
    console.log(this.page);

    this.pageForm = this.fb.group({
      title: '',
      content: ''
    });
  }

  save() {
    this.pagesService.addPages(this.pageName, this.pageForm);
  }
}

obs：对不起，我的英语

Answer 1

如果我理解的正确，当您说“可以观察到我无法工作”时，表示您在尝试以表格形式分配其值时无法访问其数据？
在这种情况下（我假设您的服务正在按预期工作），只需订阅它并在准备好使用值之后填充表格即可。例如：

ngOnInit() {
  this.pagesService.getPage(this.pageName).subscribe(v => {
  // Here your data is ready, so you can send it to a function and populate the form as you need.
     this.populateForm(v);
  });

 // Here I just construct the FormGroup, so your application can rendered.
  this.pageForm = this.fb.group({
    title: '',
    content: ''
  });
}

并添加此功能以执行任务：

populateForm = (data) => {
 console.log(data); // Just log it in console, and see if its the data that you seek for
}

您可以填充表单或执行所需的操作，而不是console.log（）。
祝你好运！

-编辑-

我现在才注意到，为您服务：

  getPage(pageName: string) {
    return this.afs.doc<any>('pages/${pageName}').valueChanges();
  }

您使用“”而不是“”来调用文档，因此，实际上，您没有使用模板字符串。因此，您的通话是错误的，并且无法通过正确的路径获取。
更改为：

return this.afs.doc<any>(`pages/${pageName}`).valueChanges();