Как получить весь идентификатор содержимого базы данных firebase, используя Angular?

Question

Я пытаюсь получить все содержимое базы данных firebase с их идентификаторами. В настоящее время у меня есть две функции: getAll () и get (input), которые возвращают один конкретный c продукт с заданным идентификатором. Моя текущая реализация дает мне все объекты из базы данных firebase без идентификаторов. Что мне нужно изменить, чтобы получить все объекты с их идентификаторами?

product.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Product } from './admin/product-form/product-interface';

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

  constructor(private db: AngularFireDatabase) { }

  create(product){
    return this.db.list('/products').push(product);

  }

  getAll() {
    return this.db.list('/products').valueChanges();


  }

  get(productId){
    return this.db.object('/products/' + productId).valueChanges();
  } 
}

product-form.component.ts

import { Product } from './product-interface';
import { ProductService } from './../../product.service';
import { CategoryService } from './../../category.service';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})


export class ProductFormComponent implements OnInit {
  categories$;
  product = {};
  // product:Product;


  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private categoryService: CategoryService, 
    private productService: ProductService) 
    {

    }

   save(product){
     this.productService.create(product);
     this.router.navigate(['/admin/products']);
   }

  ngOnInit(): void {
    this.categories$ = this.categoryService.getCategories();
    let id = this.route.snapshot.paramMap.get('id');
    this.productService.getAll().subscribe((a) => 
    this.product = a);

  }

}


admin-products.component.ts

import { ProductService } from './../../product.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit {
  products$;
  constructor(private productService: ProductService) {
    this.products$ = this.productService.getAll()
   }

  ngOnInit(): void {
    this.products$.subscribe(p => {
      console.log(p, 'products');
    })
  }

}


admin-products.component.html


<p>
<a routerLink = "/admin/products/new" class="btn btn-primary">New Product</a>
</p>

<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Price</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let p of products$ | async">
            <td>{{ p.title }}</td>
            <td>{{ p.price}}</td>
            <td>
                <a [routerLink]="['/admin/products/', p.$key]">Edit</a>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

Кстати, если вы подписываетесь на наблюдаемые в компонентах (не в angular сервисах), вам придется отказаться от их подписки на ловушку жизненного цикла ngOnDestroy (), чтобы избежать проблем с памятью и производительностью в вашем браузере.

Answer 2

Вам нужно будет использовать snapshotChanges () вместо valueChanges (). valueChanges () предоставляет вам только данные документа, в то время как snapshotChanges () также предоставляет вам метаданные.

Просмотреть соответствующие документы