javascript - 在 Ionic 的 AngularFireCollection 上使用搜索过滤器

Question

我在 firestore.service.ts 文件中有我的数据服务代码：

import { Injectable } from '@angular/core';
import { AngularFirestore, 
         AngularFirestoreCollection,
         AngularFirestoreDocument 
       } from '@angular/fire/firestore';

import { Song } from '../../models/song.interface';

import { Router } from '@angular/router'

@Injectable({
  providedIn: 'root'
})
export class FirestoreService {

  constructor(public firestore: AngularFirestore, public router: Router) {}

    createSong(
        albumName: string,
        artistName: string,
        songDescription: string,
        songName: string
    ): Promise<void> {

        const id = this.firestore.createId();

        return this.firestore.doc(`songList/${id}`).set({
            id,
            albumName,
            artistName,
            songDescription,
            songName,
        });
    }

  getSongList(): AngularFirestoreCollection<Song> {
  return this.firestore.collection(`songList`);
  }

  getSongDetail(songId: string): AngularFirestoreDocument<Song> {
  return this.firestore.collection('songList').doc(songId);
  }

}

我显示列表的主页是 home.page.ts：

import { Component } from '@angular/core';

import { AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { Song } from '../models/song.interface';
import { FirestoreService } from '../services/data/firestore.service';

import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

    public songList: AngularFirestoreCollection<Song>;
    public loadedSongList : AngularFirestoreCollection<Song>;

    constructor(
        private firestoreService: FirestoreService,
        private router: Router
        ) {}


    ngOnInit() {
        this.songList = this.firestoreService.getSongList().valueChanges();
        this.loadedSongList = this.songList;
    }

    initializeItems(): void {
        this.songList = this.loadedSongList;
    }


    filterList(evt) {
        this.initializeItems();

        const searchTerm = evt.srcElement.value;

        if (!searchTerm) {
            return;
        }

    this.songList = this.songList.filter(currentSong => {
        if (currentSong.songName && searchTerm) {
            if (currentSong.songName.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) {
                return true;
            }
        return false;
            }
        });
    }

}

我的列表显示在 home.page.html 中，如下所示：

<ion-header>
  <ion-toolbar>
    <ion-title>Song List</ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="/create">
        <ion-icon slot="icon-only" name="add"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-searchbar
    showcancelbutton=""
    (ioninput)="filterList($event)"
  ></ion-searchbar>
  <ion-card
    *ngFor="let song of songList | async"
    routerLink="/detail/{{song.id}}"
  >
    <ion-card-header>
      {{ song.songName }}
    </ion-card-header>
    <ion-card-content>
      Artist Name: {{ song.artistName }}
    </ion-card-content>
  </ion-card>
</ion-content>

唯一的问题是我的搜索栏根本不起作用。也没有抛出任何错误。我已经尝试过更改它并事先订阅 AngularFirestoreCollection 而不是异步管道，但是我在 Ovservable 与 Array 类型问题上遇到了重大错误。我只是想知道是否有人可以帮我看看我哪里出错了，所以搜索栏对我有用。我可以用我当前的代码毫无问题地显示数据。

任何帮助将不胜感激。

标签： javascriptfirebaseionic-frameworkgoogle-cloud-firestoresearchfiltercollection