时间戳

首页 > 解决方案 > 从firebase数据库读取数据角度8

angular - 从firebase数据库读取数据角度8

问题描述

我正在尝试从 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(); 
  }
}

我在控制台中得到以下结果： 结果在控制台中

我的数据库如下： 我的数据库，此代码中仅使用产品节点

我从数据库中需要的是键和值（使用 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"
  }

标签： angulartypescriptfirebasefirebase-realtime-databaseangularfire2

解决方案

获取密钥和有效载荷的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了，因为你还没有输入你的数据。但不要这样做！;)

推荐阅读