Angular 8中如何仅显示Firebase的客户姓名搜索结果？

嘿，我来帮你解决这个搜索客户的问题！你的代码已经有了基础框架，只是还差把搜索逻辑和显示列表绑定起来的步骤，下面分两种方案给你讲解：

方案一：前端快速过滤（适合数据量不大的场景） #

你已经写了filterCondition方法，但没有用它来更新要显示的客户列表。我们可以添加一个过滤后的数组，然后监听搜索框的输入变化来更新这个数组：

1. 修改组件代码 #

在CustomerListComponent里添加filteredCustomers数组，并实现搜索文本变化的处理逻辑：

import { Component, OnInit } from '@angular/core';
import { CustomerService } from '../shared/customer.service';

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
  customerArray = [];
  filteredCustomers = []; // 新增：存储过滤后的客户
  searchText: string = "";
  findName: string;

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
    this.customerService.getCustomers().subscribe(
      list => {
        this.customerArray = list.map(item => {
          return { $key: item.key, ...item.payload.val() };
        });
        // 初始化时显示所有客户
        this.filteredCustomers = [...this.customerArray];
      });
  }

  // 新增：处理搜索文本变化
  onSearchInput() {
    const searchTerm = this.searchText.toLowerCase().trim();
    if (!searchTerm) {
      // 搜索框为空时显示全部客户
      this.filteredCustomers = [...this.customerArray];
      return;
    }
    // 使用你写的过滤条件筛选客户
    this.filteredCustomers = this.customerArray.filter(customer => {
      return customer.fullName.toLowerCase().includes(searchTerm);
    });
  }
}

2. 修改模板代码 #

把原来遍历customerArray的地方改成遍历filteredCustomers，并给搜索输入框绑定输入事件：

<!-- 搜索输入框 -->
<input type="text" [(ngModel)]="searchText" (input)="onSearchInput()" placeholder="输入客户姓名搜索">

<!-- 客户列表 -->
<div *ngFor="let customer of filteredCustomers">
  <!-- 这里显示你的客户信息，比如： -->
  <p>{{customer.fullName}} - {{customer.email}}</p>
</div>

方案二：Firebase后端查询（适合大数据量场景） #

如果你的客户数据很多，前端过滤会浪费带宽和性能，这时候可以直接让Firebase返回匹配的结果。不过要注意Firebase Realtime Database没有原生的模糊查询，我们可以通过startAt和endAt来实现：

1. 准备工作：存储小写姓名字段 #

为了避免大小写匹配问题，建议在添加客户时，同时存储一个小写版本的姓名字段（比如fullNameLowerCase），这样查询更准确。

2. 修改CustomerService #

添加一个搜索客户的方法：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs';

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

  // 获取所有客户
  getCustomers(): Observable<any[]> {
    return this.db.list('customers').snapshotChanges();
  }

  // 新增：按姓名搜索客户
  searchCustomers(name: string): Observable<any[]> {
    const lowerCaseName = name.toLowerCase().trim();
    // 使用startAt和endAt实现模糊匹配
    return this.db.list('customers', ref => 
      ref.orderByChild('fullNameLowerCase')
         .startAt(lowerCaseName)
         .endAt(lowerCaseName + '\uf8ff') // \uf8ff是Unicode中较高的字符，用来匹配所有以lowerCaseName开头的内容
    ).snapshotChanges();
  }
}

注意：记得在Firebase控制台的数据库规则里，给fullNameLowerCase字段添加索引，不然查询会报错！

3. 修改组件代码 #

更新搜索逻辑，调用服务的搜索方法：

import { Component, OnInit } from '@angular/core';
import { CustomerService } from '../shared/customer.service';

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
  filteredCustomers = [];
  searchText: string = "";

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
    // 初始化加载所有客户
    this.loadAllCustomers();
  }

  loadAllCustomers() {
    this.customerService.getCustomers().subscribe(list => {
      this.filteredCustomers = list.map(item => ({ $key: item.key, ...item.payload.val() }));
    });
  }

  onSearchInput() {
    if (!this.searchText.trim()) {
      this.loadAllCustomers();
      return;
    }
    // 调用服务的搜索方法
    this.customerService.searchCustomers(this.searchText).subscribe(list => {
      this.filteredCustomers = list.map(item => ({ $key: item.key, ...item.payload.val() }));
    });
  }
}

4. 模板代码和方案一一样 #

同样用filteredCustomers来遍历显示，搜索框绑定(input)="onSearchInput()"。

这两种方案都能实现你要的“按姓名搜索并仅显示匹配结果”的需求，根据你的数据量选择就行啦！

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