这是我第二次使用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;
在我的客户端服务中,我有一个查询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;
}
&#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)