Angular 16从Firebase获取产品列表失败问题排查

核心问题分析 #

• 数据库节点路径不匹配：
  Firebase数据库中产品节点为products （注意末尾含空格），但ProductService的getAll()方法调用的路径是/product（既缺少末尾的s，也没有对应空格），导致无法定位到数据节点。同时create()方法中的路径/products 带空格，虽然和数据库节点匹配，但带空格的节点名容易引发识别问题，建议统一修正为无空格的products。

修复步骤 #

1. 修正Firebase数据库节点名称 #

将数据库中的products 节点重命名为products（去掉末尾空格），避免因空格导致路径识别异常。

2. 统一ProductService中的路径 #

修改product.service.ts里的两个方法，使用正确的节点路径：

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

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

  constructor(private db: AngularFireDatabase) { }

  create(product) {
    this.db.list('/products').push(product); // 移除路径末尾的空格
  }

  getAll() {
    return this.db.list('/products').snapshotChanges(); // 修正为/products，与数据库节点对应
  }
}

3. （可选）优化模板数据读取逻辑 #

可以在组件中预先转换snapshotChanges()返回的数据结构，让模板代码更简洁：
修改admin-products.component.ts：

import { Component } from '@angular/core';
import { ProductService } from 'src/app/product.service';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent {
  products$:any;

  constructor(private productService: ProductService){
    this.products$ = this.productService.getAll().pipe(
      map(changes => 
        changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
      )
    );
  }
}

对应的模板可以直接访问属性，无需重复调用payload.val()：

<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>

内容的提问来源于stack exchange，提问作者Garry717