实时更新单个火库文档

Question

有很多消防商店集合获取实时更新的文档和示例。但是，对于那些希望单个文档进行实时更新的人来说，几乎没有什么。我想在一个页面上有一个文档（一个），只有页面将被查看和操作，并且对文档的任何更改，都会有实时更新。itemitem

这是我的组件，想要用做一些事情：item

import { Component, OnInit } from '@angular/core';

import { ItemsService } from '../shared/items.service';

import { ActivatedRoute, Router } from '@angular/router';

@Component({

  selector: 'app-view-item',

  templateUrl: './view-item.component.html',

  styleUrls: ['./view-item.component.css']

})

export class ViewItem implements OnInit {

  item;

  private sub: any;

  constructor(

    // Service used for Firebase calls

    private itemsService: ItemsService,

    private route: ActivatedRoute,

    private router: Router

  ) {}

  ngOnInit() {

    // Item retrieved from */item/:id url

    this.sub = this.route.params.subscribe(params => {

      this.getItem(params['id']);

    });

  }

  getItem = (id) => {

    this.itemsService.getItem(id).subscribe(res => {

      console.log(res);

      this.item = res;

      console.log(this.item);

    });

  }

我得到的日志是 。在控制台中调用将返回相同的结果。我不确定如何继续，并希望得到任何指导。在控制台中登录将返回一个拜占庭对象。也许这就是我访问的方式，但如果是这样，为什么它没有保存，我如何访问 的值？console.log(this.item)undefinedthis.itemresitemthis.itemitem




Answer 1

snapshotChanges返回可观察的操作，而不是实际值。应使用 提取值：action.payload.doc.data()因此，您的代码应类似于以下示例。getItem(id) {  return this.firestore.collection('items').doc(id).snapshotChanges()    .pipe(      map(actions => actions.map(a => {        const data = a.payload.doc.data();        const id = a.payload.doc.id;        return { id, ...data };      })    );}或者您可以使用 .valueChangesdocgetItem(id) {  return this.firestore.collection('items').doc(id).valueChanges();}