Google cloud firestore AngularFire-如何使用快照更改并将数据作为变量返回

我目前有一个Firestore文档查询，如下所示：

  getDocument(){
    this.albumDoc = this.afs.doc<Album>(`albums/abc`);
    this.album = this.albumDoc.valueChanges(); 
  }

getDocument（）{
this.albumDoc=this.afs.doc（`albums/abc`）；
this.album=this.albumDoc.valueChanges（）；
}

AngularFire文档声明您可以使用“快照”更改来获取更多数据。然而，没有一个例子可以说明你是如何做到这一点的。对于集合查询，快照更改使用管道/映射，然后返回“数据”，若需要，可以将其分配给变量

---

是否可以对文档查询执行相同的操作？我的文档中有一个firestore值，我想利用它。

valuechanges（）和snapshotChanges（）之间的主要区别在于后者为我们提供了分配给文档的唯一文档ID，而前者仅为我们提供文档值，而不提供文档ID

我正在分享一个示例，如果可能，请尝试：

这是我的服务文件：

    import { Injectable } from '@angular/core';
import { Employee } from './employee.model';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  formData: Employee;

  constructor(private firestore: AngularFirestore) { }

  getEmployees() {
    return this.firestore.collection('employees').snapshotChanges();
  }

}

这是我的component.ts文件：

    import { Component, OnInit } from '@angular/core';
import { Employee } from 'src/app/shared/employee.model';
import { EmployeeService } from 'src/app/shared/employee.service';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  list: Employee[];

  constructor(private service: EmployeeService, private firestore: AngularFirestore) { }

  ngOnInit() {
    this.service.getEmployees().subscribe(actionArray => {
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...item.payload.doc.data()
        } as Employee
      })
    });
  }

  onEdit(emp: Employee) {
    this.service.formData = Object.assign({},emp);
  }

  onDelete(id: string) {
    if(confirm("are you sure you want to delete this record ?")) {
    this.firestore.doc('employees/' + id).delete();
    }
  }

}

---

valuechanges（）和snapshotChanges（）之间的主要区别在于，后者为我们提供分配给文档的唯一文档ID，而前者仅为我们提供文档值，而不提供文档ID

我正在分享一个示例，如果可能，请尝试：

这是我的服务文件：

    import { Injectable } from '@angular/core';
import { Employee } from './employee.model';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  formData: Employee;

  constructor(private firestore: AngularFirestore) { }

  getEmployees() {
    return this.firestore.collection('employees').snapshotChanges();
  }

}

这是我的component.ts文件：

    import { Component, OnInit } from '@angular/core';
import { Employee } from 'src/app/shared/employee.model';
import { EmployeeService } from 'src/app/shared/employee.service';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  list: Employee[];

  constructor(private service: EmployeeService, private firestore: AngularFirestore) { }

  ngOnInit() {
    this.service.getEmployees().subscribe(actionArray => {
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...item.payload.doc.data()
        } as Employee
      })
    });
  }

  onEdit(emp: Employee) {
    this.service.formData = Object.assign({},emp);
  }

  onDelete(id: string) {
    if(confirm("are you sure you want to delete this record ?")) {
    this.firestore.doc('employees/' + id).delete();
    }
  }

}