从 firebase 数据库读取数据 angular 8

Question

我正在尝试从 firebase 数据库读取数据，这是我的代码：我的组件：

import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/services/product.service';
import { Observable } from 'rxjs';

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

    //Just try to log what the db will give me back

    this.productService.getProducts().subscribe(re=>console.log(re));
  }

  ngOnInit() {
    this.products$=this.productService.getProducts();
  }

}

这是我的产品服务：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  constructor(private db: AngularFireDatabase) { }

  postProduct(formValue) {
    this.db.list('/products').push(formValue);
  }

  getProducts(){
    return  this.db.list('/products').snapshotChanges(); 
  }
}

我在控制台中得到以下结果： result in the console

我的数据库如下： my database, only the products node is used in this code

我从数据库中需要的是键和值（使用 valuechanges() 而不是 snapshotchanges() 只给出没有键的值），而我得到的结果是一团糟，请各位大侠指教从 firebase 中的数据库读取？

"dependencies": {
    "@angular/animations": "~8.2.3",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "@ng-bootstrap/ng-bootstrap": "^5.1.1",
    "bootstrap": "^4.3.1",
    "firebase": "^6.6.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "~8.3.0",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@types/node": "~8.9.4",
    "ts-node": "~7.0.0",
    "typescript": "~3.5.3"
  }

Answer 1

从 snapshotChanges 获取密钥和有效负载的方法是使用 payload.val() 作为有效负载，使用 payload.key 作为密钥：

return this.db.list('/products').snapshotChanges().pipe(
  map((products: any[]) => products.map(prod => {
    const payload = prod.payload.val();
    const key = prod.key;
    return <any>{ key, ...payload };
  })),
);

请不要使用any，TypeScript，顾名思义，主要用途是强类型数据。它将极大地帮助您开始输入数据，因为 IDE 会在您尝试做错事情时告诉您。上面我使用了 any，因为你还没有输入你的数据。但是不要这样做！ ;)

从 firebase 数据库读取数据 angular 8

Reading data from firebase database angular 8

firebase

typescript

firebase-realtime-database

angularfire2

angular