Angular8 无法使用搜索栏筛选FIREBASE列表

我能够从firebase实时数据库检索用户列表。然而，我一直在思考如何对检索到的列表应用过滤器，这样我只能看到与我在搜索栏上键入的内容相匹配的用户

我在这个网站上遵循了这个例子，这与我试图实现的目标类似

model.ts

export interface AppUser {
    userId: string;
    firstname: string;
    lastname: string;
    phone: string;
    email: string;
    isAdmin: boolean;
    photoURL: string;
}

User.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})
export class AdminUserService {
  userRef: AngularFireObject<any>;

  constructor(private db: AngularFireDatabase) { }

  getAll() {
    return this.db.list('/users').snapshotChanges();
  }

  get(id: string) {
    this.userRef = this.db.object('users/' + id);
    return this.userRef;
  }

user.component.html

    <p>
        <a routerLink="/admin/users/new" class="btn btn-primary">New User</a>
    </p>
    <p>
        <input #query (keyup)="filter(query.value)" type="text" class="fom-
         control" placeholder="Search...">
    </p>

<tbody>
    <tr *ngFor="let u of filteredUser">
         <td>{{ u.firstname }} {{ u.lastname }}</td>
         <td>{{ u.email }}</td>
         <td>{{ u.phone }}</td>
         <td>{{ u.isAdmin }}</td>
         <td>
             <a [routerLink]="['/admin/users/', u.id]">Edit</a>
         </td>
    </tr>
</tbody>

新用户



{{u.firstname}{{u.lastname}}
{{u.email}
{{u.phone}}
{{u.isAdmin}}
编辑

到目前为止，我没有收到任何错误，但当我在component.ts文件中添加filter方法时，我没有从firebase获得任何列表。

导出类用户组件实现OnInit、OnDestroy{
export class UsersComponent implements OnInit, OnDestroy {

  appUser: AppUser[];
  filteredUser: AppUser[];
  subscription: Subscription;

  constructor(private adminUserService: AdminUserService) { }

  ngOnInit() {
    this.subscription = this.adminUserService.getAll()
      .subscribe(a => this.filteredUser = this.appUser = a);
  }

  filter(query: string) {
    this.filteredUser = (query) ?
      this.appUser.filter(u => u.firstname.toLowerCase().includes(query.toLowerCase())) : 
     this.appUser;
    }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

getAll(): Observable<any[]> {
    return this.db.list('/users').snapshotChanges()
      .pipe(
        map(actions =>
          actions.map(a => ({ key: a.key, ...a.payload.val() }))
          )
      );
  }

<tr *ngFor="let u of filteredUser">
  <td>{{ u.firstname }} {{ u.lastname }}</td>
  <td>
    <a [routerLink]="['/admin/users/', u.id]">Edit</a>
  </td>
</tr>

appUser:appUser[]；
filteredUser:AppUser[]；
认购：认购；
构造函数（私有adminUserService:adminUserService）{}
恩戈尼尼特（）{
this.subscription=this.adminUserService.getAll（）
.subscribe（a=>this.filteredUser=this.appUser=a）；
}
过滤器（查询：字符串）{
this.filteredUser=（查询）？
this.appUser.filter（u=>u.firstname.toLowerCase（）。包括（query.toLowerCase（））：
这个.appUser；
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}
getAll（）：可观察{
返回此.db.list（'/users'）。快照更改（）
.烟斗(
映射（操作=>
actions.map（a=>（{key:a.key，…a.payload.val（）}））
)
);
}
{{u.firstname}{{u.lastname}}
编辑

导出类用户组件实现OnInit、OnDestroy{
appUser:appUser[]；
filteredUser:AppUser[]；
认购：认购；
构造函数（私有adminUserService:adminUserService）{}
恩戈尼尼特（）{
this.subscription=this.adminUserService.getAll（）
.subscribe（a=>this.filteredUser=this.appUser=a）；
}
过滤器（查询：字符串）{
this.filteredUser=（查询）？
this.appUser.filter（u=>u.firstname.toLowerCase（）。包括（query.toLowerCase（））：
这个.appUser；
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}
getAll（）：可观察{
返回此.db.list（'/users'）。快照更改（）
.烟斗(
映射（操作=>
actions.map（a=>（{key:a.key，…a.payload.val（）}））
)
);
}
{{u.firstname}{{u.lastname}}
编辑

任何对此问题有答案的人，或者谁能引导我找到一个能帮助我解决问题的帖子？。我一直在遵循oshop教程来完成我的第一个angular 8项目，但我所有试图让数据过滤工作正常进行的努力都没有结果。任何对此问题有答案的人，或者谁能引导我找到一个会让我难堪的帖子我一直在遵循oshop教程来完成我的第一个angular 8项目，但我所有的努力都没有取得成果。

export class UsersComponent implements OnInit, OnDestroy {

  appUser: AppUser[];
  filteredUser: AppUser[];
  subscription: Subscription;

  constructor(private adminUserService: AdminUserService) { }

  ngOnInit() {
    this.subscription = this.adminUserService.getAll()
      .subscribe(a => this.filteredUser = this.appUser = a);
  }

  filter(query: string) {
    this.filteredUser = (query) ?
      this.appUser.filter(u => u.firstname.toLowerCase().includes(query.toLowerCase())) : 
     this.appUser;
    }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

getAll(): Observable<any[]> {
    return this.db.list('/users').snapshotChanges()
      .pipe(
        map(actions =>
          actions.map(a => ({ key: a.key, ...a.payload.val() }))
          )
      );
  }

<tr *ngFor="let u of filteredUser">
  <td>{{ u.firstname }} {{ u.lastname }}</td>
  <td>
    <a [routerLink]="['/admin/users/', u.id]">Edit</a>
  </td>
</tr>