AngularFire2能否从Firebase数据库按值获取特定对象（如featured为true的菜品）？

当然可以直接在Firebase服务器端完成这个查询，完全不需要先把所有菜品拉到客户端再过滤——这种服务端查询不仅能节省带宽，还能提升应用性能，是更优的方案。下面给你具体的实现步骤：

1. 确认AngularFire2配置到位 #

首先要确保你的项目已经正确集成AngularFire2，并且在需要查询的组件/服务中注入了AngularFireDatabase服务。

2. 编写服务端查询代码 #

假设你的菜品数据存在Firebase数据库的dishes节点下，你可以通过orderByChild和equalTo组合方法，精准筛选出featured属性为true的菜品：

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-featured-dishes',
  templateUrl: './featured-dishes.component.html'
})
export class FeaturedDishesComponent {
  // 定义可观察对象接收查询结果
  featuredDishes$: Observable<any[]>;

  constructor(private db: AngularFireDatabase) {
    // 执行服务端查询：筛选featured为true的菜品
    this.featuredDishes$ = this.db.list('dishes', ref => 
      ref.orderByChild('featured').equalTo(true)
    ).valueChanges();
  }
}

3. 在模板中渲染查询结果 #

通过Angular的异步管道（async），可以直接在模板中订阅并展示查询到的菜品：

<div class="featured-dishes">
  <h2>推荐菜品</h2>
  <div *ngFor="let dish of featuredDishes$ | async" class="dish-card">
    <h3>{{ dish.name }}</h3>
    <p>{{ dish.description }}</p>
    <span>价格：{{ dish.price }}</span>
  </div>
</div>

关键注意事项 #

• 添加数据库索引：如果是第一次针对featured字段做查询，Firebase会提示你添加索引以优化性能。你需要在Firebase控制台的「数据库规则」中添加如下配置：

  {
    "rules": {
      "dishes": {
        ".indexOn": ["featured"]
      }
    }
  }
  

• 数据返回形式：list方法返回的是符合条件的数据列表，如果需要获取单个对象（比如确保只有一个featured菜品），可以改用object方法配合查询，但要注意查询结果可能为空的情况。

内容的提问来源于stack exchange，提问作者rami bin tahin