Как отобразить только результат поиска из firebase в угловых? - PullRequest
0 голосов
/ 09 ноября 2019

Я хочу отображать только результаты поиска из firebase, используя угловую версию 8. У меня есть данные о клиентах, хранящихся в 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
   }
}

Я ожидаю, что только данные поиска будутотображаться, но отображается полный список клиентов

1 Ответ

0 голосов
/ 12 ноября 2019

Вы на самом деле никогда не используете написанное вами filterCondition, поэтому, конечно, все клиенты будут отображаться.

Трудно сказать, нет ли других проблем, так как выв вашем вопросе не указан ожидаемый результат или пример данных, но вам по крайней мере нужно изменить обратный вызов, который вы используете, когда подписываетесь на что-то более похожее на это:

this.customerService.getCustomers().subscribe(
  list => {
    this.customerArray = list.filter(this.filterCondition).map(item => {
      // contents omitted for berevity
    });
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...