如何仅以角度显示来自firebase的搜索结果？答案

【问题标题】：How to display only search result from firebase in angular?如何仅以角度显示来自firebase的搜索结果？
【发布时间】：2020-03-05 18:03:27
【问题描述】：

我只想使用 angular 版本 8 显示来自 firebase 的搜索结果。我有存储在 firebase 中的客户数据，我想按名称搜索特定结果。

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

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

      customerArray = [];
      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()
              };
            });
          });
      }

      filterCondition(customer) {
        return 
     customer.fullName.toLowerCase().indexOf(this.searchText.toLowerCase()) != -1;
      }
  find(findName){
     // query to check the enter name exist is firebase and display it
   }
}

我希望只显示搜索数据，但会显示完整的客户列表

【问题讨论】：

angularfire2 是旧版本库。你需要安装@angular/fire库。

标签： javascript angular search firebase-realtime-database angularfire2

【解决方案1】：

您实际上并没有使用过您编写的filterCondition，所以当然会显示所有客户。

很难判断是否没有其他问题，因为您没有在问题中指定预期的输出或示例数据，但您至少需要更改订阅类似这样的内容时使用的回调：

this.customerService.getCustomers().subscribe(
  list => {
    this.customerArray = list.filter(this.filterCondition).map(item => {
      // contents omitted for berevity
    });
  });

【讨论】：