将 Firebase 值从服务返回到组件 angular 6

Question

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

基本上我创建了一个服务 - “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();