从 Firebase 数据库使用角度检索特定值的详细信息

Question

在我的演示应用程序中，我有一个“员工”界面，其中包含以下字段： employee.ts

export interface Employee{
    id:string;
    firstName:string;
    lastName:string;
    email:string;
    mobileNumber:string;

}

在 UI 中，我显示了添加到 Firebase 数据库中的所有员工。 现在，我想使用员工 ID 更新该员工的特定数据。 edit-employee.component.ts：

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-edit-employee',
  templateUrl: './edit-employee.component.html',
  styleUrls: ['./edit-employee.component.css']
})
export class EditEmployeeComponent implements OnInit {
employee:Employee;
id:string;
submitted:boolean=false;
  constructor(private employeeService:EmployeeService,
    private activeRoute:ActivatedRoute) { }

  ngOnInit(): void {
    this.activeRoute.params.subscribe(
    (data)=>{
       this.id=data['id'] 
    }
    );
    console.log('id::'+this.id);
    this.employeeService.getEmployeeById(this.id).subscribe(
      (data)=>{
        console.log(data);
        this.employee=data.map((e)=>{
            return{
              firstName:e.payload.doc.data()['firstName'],
              lastName: e.payload.doc.data()['lastName']
            }
        })
        console.log(this.employee);
      }
    )
  }
  onSubmit(){
    console.log('submitted');
    this.submitted=true;
  }

}

employee.service.ts：

getEmployeeById(id:string):Observable<any>{
   //return this.firestore.collection('users').doc(id).valueChanges();
   return this.firestore.doc('users/'+id).get();
  }

我想根据从 UI 中选择的员工 ID 填充数据。 但是我在填充这些数据时遇到错误。

Answer 1

考虑 id 是存储在 Firestore 中的对象的文档 ID。这将返回一个对象。

return this.firestore.doc('users/'+id).valueChanges();

否则，如果它是保存对象的属性，那么你必须在集合中查询。这将返回一个对象数组。只有 1，如果 id 是唯一的

return this.firestore.collection('users', ref => ref.where('id', '==', id)).valueChanges();

在订阅中记录这些数据。它应该是您可能保存在 Firestore 中的确切对象。

ngOnInit(): void {
  this.activeRoute.params.subscribe(
    (data)=>{
      this.id = data['id'] 
      console.log('id::'+this.id);
      this.employeeService.getEmployeeById(this.id).subscribe(
       (data)=>{
         console.log(data); // Should be the exact same object that was saved.
         // Using the 2nd way, this will return an array with 1 item. So take the 0th element, ie data[0]
         this.employee = data; // data[0]
      });
    }
  );
}

注意：始终维护类型以获得 TypeScript 的好处。

Answer 2

这里的主要问题是您假设 this.id 在您调用 this.employeeService.getEmployeeById(this.id) 时被分配了一个值。但是this.id 是异步分配的。尽管有时可能会正确分配，但不能保证每次都正确分配。在这种情况下，您可以使用 RxJS 高阶映射运算符之一，例如 switchMap。

ngOnInit(): void {
  this.activeRoute.params.pipe(
    switchMap(data => {
      this.id = data['id'];
      console.log('id::'+this.id);
      return this.employeeService.getEmployeeById(this.id);
    })
  ).subscribe(
    data => {
      console.log(data);
      this.employee = data.map((e) => ({
        firstName:e.payload.doc.data()['firstName'],
        lastName: e.payload.doc.data()['lastName']
      }))
      console.log(this.employee);
    }
  );
}

这可能无法解决您的问题。为此，您需要确保订阅中的 data 是一个数组。如果没有，则不能在其上调用map 函数。