из базы данных Firebase получить сведения о конкретном значении, используя angular - PullRequest
Новая
       46

из базы данных Firebase получить сведения о конкретном значении, используя angular

0 голосов
/ 05 августа 2020

В моем демонстрационном приложении у меня есть интерфейс «Сотрудник», который содержит следующие поля: employee.ts 

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

}

В пользовательском интерфейсе я показываю всех сотрудников, добавленных в Firebase. база данных. Теперь, используя идентификатор сотрудника, я хочу обновить конкретные данные этого сотрудника. 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();
  }

Я хочу заполнить данные по идентификатор сотрудника, выбранный из пользовательского интерфейса. Но я получаю сообщение об ошибке при заполнении этих данных. enter image description here

введите описание изображения здесь

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Учитывая, что id - это идентификатор документа объекта, хранящегося в Firestore. Это вернет объект. 

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

Иначе, если это атрибут сохраненного объекта, тогда вам нужно будет запросить в коллекции. Это вернет массив объектов. Только 1, если идентификатор уникальный 

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

Записать эти данные в подписку. Это должен быть именно тот объект, который вы могли сохранить в хранилище. 

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.

0 голосов
/ 05 августа 2020

Основная проблема здесь в том, что вы предполагаете, что this.id присвоено значение к тому времени, когда вы звоните this.employeeService.getEmployeeById(this.id). Но this.id назначается асинхронно. Хотя иногда он может быть назначен правильно, нельзя гарантировать, что он будет назначаться каждый раз. В этом случае вы можете использовать один из операторов сопоставления Rx JS более высокого порядка, например 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.

...