Return 从服务到组件的 firebase 值 angular 6

Question

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

基本上我创建了一个服务 - "PagesService" 我有一个函数可以 return 发送我发送的页面的数据。我正在尝试使用 getPage 来 return 我的组件的值，并将它们分配给表单，我尝试的其他任何方法都没有用，只有 returns 一个 "observable" 我无法工作，有人知道我能做什么吗？

完整代码，服务：

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

如果我没理解错的话，当你说 "Observable that I cannot work" 的意思是当你试图在表单中分配它的值时你不能访问他的数据？
在这种情况下（我假设您的服务按预期工作），只需订阅它并在您的值准备好使用后填充表单。例如：

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

Return 从服务到组件的 firebase 值 angular 6

Return firebase values from a service to a component angular 6

firebase

angularfire2

angular6