Erstellen einer Auto-Complete-Suche mit angularfire2 und firestore?

Question

Hey ich versuche, eine einfache Suchfunktion für meine Web-App zu erstellen. gibt es Dokumentation, wie man es mit Echtzeitdatenbank erstellt.

Welche Änderungen muss ich machen, um dies auf Firestore arbeiten zu lassen?

dieses Tutorial wurde von hier genommen https://angularfirebase.com/lessons/autocomplete-search-with-angular4-and-firebase/

hat es ein schönes Video als auch :)

dies ist, wie es zu machen mit Echtzeit-Datenbank:

#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 
     } 
    }); 
    } 
} 

Der Automatische Vervollständigungssuchkomponente

<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") 
    } 

} 

Answer 1

Das Problem, das Sie mit Firestore ist eine Latenz ein Gesicht. Nicht sicher, ob dies daran liegt, dass es noch in der Betaversion ist, aber die Latenz für Lesevorgänge ist besorgniserregend hoch.

Answer 2

Mit Firestore ist es genauso.

Hier die Arbeits- und geprüfte Lösung Ich schrieb:

search.ts

import { Component } from '@angular/core'; 
import { AngularFirestore } from 'angularfire2/firestore'; 

@Component({ 
    selector: 'search', 
    templateUrl: 'search.html' 
}) 
export class SearchComponent { 

    searchValue: string = ""; 
    results: any; 

    constructor(public afs: AngularFirestore) { 
    } 

    search() { 
    let self = this; 
    self.results = self.afs.collection(`users`, ref => ref 
     .orderBy("username") 
     .startAt(self.searchValue.toLowerCase()) 
     .endAt(self.searchValue.toLowerCase()+"\uf8ff") 
     .limit(10)) 
     .valueChanges(); 
    } 

} 

search.html

<div> 
    <input type="text" (keyup)="search()" [(ngModel)]="searchValue"> 
    <div class="search-results"> 
    <div class="search-result" *ngFor="let result of results | async"> 
     {{ result.username }} 
    </div> 
    </div> 
</div> 

Wenn Sie eine komplexere Suche benötigen, Sie könnten Algolia verwenden:

Um die Volltextsuche Ihrer Cloud Firestore-Daten zu ermöglichen, verwenden Sie einen Suchdienst von Drittanbietern wie Algolia. Betrachten wir eine Notizen-App, wo jede Note ein Dokument:

Sie werden mehr Informationen über die official firestore documentation