我正在尝试为我的web应用程序构建一个简单的搜索功能。有关于如何用实时数据库创建它的文档。
我需要做哪些更改才能在firestore上工作?
本教程取自此处https://angularfirebase.com/lessons/autocomplete-search-with-angular4-and-firebase/
它也有一个很好的视频:)
这是如何用实时数据库来实现的
#movies.service.ts
import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from '
angularfire2/database';
@Injectable()
export class MoviesService {
constructor(private db: AngularFireDatabase) { }
getMovies(start, end): FirebaseListObservable<any> {
return this.db.list('/movies', {
query: {
orderByChild: 'Title',
limitToFirst: 10,
startAt: start,
endAt: end
}
});
}
}自动完成搜索组件
<h1>Movie Search</h1>
<input type="text" (keydown)="search($event)" placeholder="search
movies..." class="input">
<div *ngFor="let movie of movies">
<h4>{{movie?.Title}}</h4>
<p>
{{movie?.Plot}}
</p>
</div>
<div *ngIf="movies?.length < 1">
<hr>
<p>
No results found :(
</p>
</div>TS
import { Component, OnInit } from '@angular/core';
import { MoviesService } from '../movies.service';
import { Subject } from 'rxjs/Subject'
@Component({
selector: 'movie-search',
templateUrl: './movie-search.component.html',
styleUrls: ['./movie-search.component.scss']
})
export class MovieSearchComponent implements OnInit {
movies;
startAt = new Subject()
endAt = new Subject()
constructor(private moviesSvc: MoviesService) { }
ngOnInit() {
this.moviesSvc.getMovies(this.startAt, this.endAt)
.subscribe(movies => this.movies = movies)
}
search($event) {
let q = $event.target.value
this.startAt.next(q)
this.endAt.next(q+"\uf8ff")
}
}发布于 2017-12-17 18:03:44
使用Firestore时,您将面临延迟问题。不确定这是否是因为它仍处于测试阶段,但读取的延迟高得令人担忧。
https://stackoverflow.com/questions/47841119
复制相似问题