使用Angular5管道过滤Firebase数据

Question

我正在尝试根据输入字段值来了解如何过滤我已拉到网页的Firebase数据。现在仅通过名称过滤就可以了。现在我试图用Angular5管道来完成这个过滤结果。这就是我到目前为止所做的：

HTML：

＆＃13;

＆＃13;

<div class="theoremsContainer">
  <input [(ngModel)]="searchText" class="bibleSearchBar" type="text" placeholder="Search..">
    <ul appScrollable (scrollPosition)="scrollHandler($event)">
      <li id="listElements" *ngFor="let theorem of bibleObservable$ | bibleFilter : searchText | async">
        <div class="theoremContainer" [style.background-color]="setBackgroundColor(theorem.type)">
          <h1 class="theoremTitle">{{theorem.rule}}: {{theorem.name}}</h1>
          <h2 class="theoremType">{{theorem.type}}</h2>
          <p class="theoremEquation">{{theorem.eq}}</p>
        </div>
      </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

打字稿：

＆＃13;

＆＃13;

import { Component, OnInit, AfterContentChecked } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { BibleService } from './bible.service';
import {FirebaseListObservable} from 'angularfire2/database-deprecated';
declare var MathJax: any;

@Component({
  selector: 'app-bible',
  templateUrl: './bible.component.html',
  styleUrls: ['./bible.component.scss']
})
export class BibleComponent implements OnInit {

  bibleObservable$: FirebaseListObservable<any[]>;

  constructor(service: BibleService, private db: AngularFireDatabase) {
    this.bibleObservable$ = service.getTheorems(db);
  }

  ngAfterContentChecked(){
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
  }

  ngOnInit() {}

  scrollHandler(event) {
    if (event === 'top') {
      console.log('Top touched');
    } else if (event === 'top') {
      console.log('Bottom touched');
    }
  }

  setBackgroundColor(type) {
    if (type === 'axiom') {
      return 'lightsalmon';
    } else {
      return '#bee5eb';
    }
  }
}

＆＃13;

＆＃13;

＆＃13;

管道：

＆＃13;

＆＃13;

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'bibleFilter'
})
export class BibleFilterPipe implements PipeTransform {

  transform(items: any[], searchText: string): any[] {
    var answer: any[] = [];

    if (!items) return [];
    if (!searchText) return items;

    searchText = searchText.toLowerCase();

    return items.filter(values => {
      for (let i in values) {
        if (values[i]["name"]) {
          answer.push(values[i]["name"].toString().toLowerCase());
        }
      }
      console.log("ANSWER: " + answer);
      console.log(answer.includes(searchText));
      return answer.includes(searchText);
    });
  }

}

＆＃13;

＆＃13;

＆＃13;

现在我的管道中的答案数组返回一个字符串数组，这些字符串是每个元素的名称，但是当我在搜索栏中输入任何内容时，所有元素都会消失。我该怎么做才能在搜索中获得正确的Firebase数据？