angular - Angular6/Firebase 中的搜索栏不显示结果

Question

这是我第二次使用 StackOverflow。我目前正在学习 Angular6，我正在尝试集成一个搜索栏来查询 firebase 中的“客户”。

我有一些基本的 CRUD 操作正在工作，但似乎无法让搜索栏正常工作。以下是搜索栏的相关功能。

//client-search.component.ts
export class ClientSearchComponent implements OnInit {

	clients;
	startAt: BehaviorSubject<string|null> = new BehaviorSubject("");
	endAt: BehaviorSubject<string|null> = new BehaviorSubject("\uf8ff");

  constructor(private clientsSvc: ClientService) { }

  ngOnInit() {
    this.clientsSvc.getClient(this.startAt, this.endAt).subscribe(clients =>           this.clients = clients);
  }

  search($event) {
    let q = $event.target.value;
    console.log("Our start: " + q);
    this.startAt.next(q);
    console.log(this.startAt.next(q));
    this.endAt.next(q + "\uf8ff");
  }

<!-- client-search.component.html -->

   
<h1>Client Search</h1>

<input type="text" (keydown)="search($event)" placeholder="search clients..." class="input">


<div *ngFor="let client of clients">

  <h4>{{clients?.name}}</h4>

  <p>

<!-- {{movie?.Plot}} -->

  </p>

</div>


<div *ngIf="clients?.length < 1">

  <hr>

  <p>

    No results found :(

  </p>

</div>

在我的客户端服务中，我有一个函数可以查询 firebase 以返回 observables 以列出它们。

getClient(start, end): FirebaseListObservable<any> {
    const r: any = this.firebase.list('/clients', ref =>
      ref.orderByChild('name').limitToFirst(10).startAt(start).endAt(end)
    );
    return r;
  }

更新

深入挖掘之后，ngOnInit 调用了getClient()，但是参数好像不太喜欢。有什么办法吗？

ClientsComponent.html:1 ERROR Error: Query: First argument passed to startAt(), endAt(), or equalTo() cannot be an object.
at Function.push../node_modules/@firebase/database/dist/index.cjs.js.Query.validateQueryEndpoints_ (index.cjs.js:4702)
at Query.push../node_modules/@firebase/database/dist/index.cjs.js.Query.startAt (index.cjs.js:4964)
at client.service.ts:55
at AngularFireDatabase.push../node_modules/angularfire2/database/database.js.AngularFireDatabase.list (database.js:18)
at ClientService.push../src/app/clients/shared/client.service.ts.ClientService.getClient (client.service.ts:54)
at ClientSearchComponent.push../src/app/clients/client-search/client-search.component.ts.ClientSearchComponent.ngOnInit (client-search.component.ts:23)
at checkAndUpdateDirectiveInline (core.js:8945)
at checkAndUpdateNodeInline (core.js:10209)
at checkAndUpdateNode (core.js:10171)
at debugCheckAndUpdateNode (core.js:10804)

标签： angularfirebasefirebase-realtime-databaserxjsangular6