首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用angularfire2和firestore创建自动完成搜索?

使用angularfire2和firestore创建自动完成搜索?
EN

Stack Overflow用户
提问于 2017-12-16 07:29:22
回答 1查看 4.5K关注 0票数 8

我正在尝试为我的web应用程序构建一个简单的搜索功能。有关于如何用实时数据库创建它的文档。

我需要做哪些更改才能在firestore上工作?

本教程取自此处https://angularfirebase.com/lessons/autocomplete-search-with-angular4-and-firebase/

它也有一个很好的视频:)

这是如何用实时数据库来实现的

代码语言:javascript
复制
#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
      }
    });
  }
}

自动完成搜索组件

代码语言:javascript
复制
 <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

代码语言:javascript
复制
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")
  }
}
EN

回答 1

Stack Overflow用户

发布于 2017-12-17 18:03:44

使用Firestore时,您将面临延迟问题。不确定这是否是因为它仍处于测试阶段,但读取的延迟高得令人担忧。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47841119

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档