Внедрение автозаполнения Angular Firestore - PullRequest
Новая
       6

Внедрение автозаполнения Angular Firestore

0 голосов
/ 20 сентября 2018

Кажется, моя подписка Observable <[]>. В моем TS для поиска фильмов не работает, потому что каждый раз, когда я что-то печатаю, getItems () не выполняется.

Дополнительные сведения: поэтому я пытаюсь реализовать функцию автозаполнения для моего веб-приложения, используя Angular и Firestore: когда пользователь вводит «Ite», приложение ищет в базе данных Firestore все элементы, заголовок которых начинается с«Ite» и отображение на странице.

Мой код был создан на основе этого учебника Firebase RealtimeDB с изменениями, которые перенесли его в Firestore: https://angularfirebase.com/lessons/autocomplete-search-with-angular4-and-firebase/

фильм-поиск HTML: 

<input type="text" (keydown)="searchMovie($event)" placeholder="search movies..." class="input">

<div *ngFor="let movie of movies">
  <h4>{{item?.title}}</h4>
  <p>
    {{item?.title}}
  </p>
</div>

<div *ngIf="item?.length < 1">
  <hr>
  <p>
    No results found :(
  </p>
</div>

поиск фильмов TS 

import { Component, OnInit } from '@angular/core';
import { MoviesService } from '../../services/movies.service';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';


@Component({
  selector: 'app-movie-search',
  templateUrl: './movie-search.component.html',
  styleUrls: ['./movie-search.component.css']
})

export class MovieSearchComponent implements OnInit {
  movies;  

  startAt: BehaviorSubject<string|null> = new BehaviorSubject("");
  endAt: BehaviorSubject<string|null> = new BehaviorSubject("\uf8ff");

  constructor(private moviesSvc: MoviesService) { }


  searchMovie($event) {
    let q = $event.target.value
    this.startAt.next(q)
    this.endAt.next(q+"\uf8ff")
    console.log("startAt Looks like this", this.startAt);
    console.log("endAt Looks like this", this.endAt);
}

  ngOnInit() {
    //console.log("ngOnInIt was runing with ", this.startAt," as startAt")
    this.moviesSvc.getItems(this.startAt, this.endAt).subscribe(movies => this.movies = movies)

  }



}

movie.service TS 

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { Item } from '../models/Item';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import "rxjs/add/operator/switchMap";
import "rxjs/add/observable/zip";

@Injectable()
export class MoviesService {

  itemsCollection:AngularFirestoreCollection<Item>;
  items:Observable<Item[]>;

  constructor(private afs: AngularFirestore) { 

  }

  getItems(start, end) {
    this.itemsCollection=this.afs.collection('items', ref => 
    ref
      .orderBy('title')
      .limit(5)
      .startAt(start)
      .endAt(end)  
  )

    console.log("itemsCollection is like", this.itemsCollection)

    this.items= this.itemsCollection.valueChanges()

    return this.items

  }


}
...