Angular6 / Firebase中的搜索栏未显示结果

时间:2018-06-19 05:58:27

标签: angular firebase firebase-realtime-database rxjs angular6

这是我第二次使用StackOverflow。我目前正在学习Angular6,我正在尝试将搜索栏集成到查询客户端#34;在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");
  }
&#13;
<!-- 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>
&#13;
&#13;
&#13;

在我的客户端服务中,我有一个查询firebase的函数,以返回observables列表。

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

更新

深入挖掘之后,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)

0 个答案:

没有答案