实时更新单个火库文档

Question

有很多消防商店集合获取实时更新的文档和示例。但是，对于那些希望单个文档进行实时更新的人来说，几乎没有什么。我想在一个页面上有一个文档（一个），只有页面将被查看和操作，并且对文档的任何更改，都会有实时更新。itemitem这是我的组件，想要用做一些事情：itemimport { 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 };

      })

    );

}

或者您可以使用 .valueChangesdoc

getItem(id) {

  return this.firestore.collection('items').doc(id).valueChanges();

}