时间戳

首页 > 解决方案 > Angular为Firestore创建搜索栏

angular - Angular为Firestore创建搜索栏

问题描述

我尝试创建一个搜索栏来从 Firestore 查询数据并在列表中显示结果。为此，我创建了以下内容：

export class SearchComponentComponent implements OnInit  {


ngOnInit(): void {

}
searchValue: string = "";
results: any;

 constructor(public afs: AngularFirestore) {
 }

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

 }

和我的 HTML：

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

现在的问题是我没有得到任何数据。一个博客子项包含以下数据：

标题、正文、图像

我想在我的结果列表中显示标题

标签： angulargoogle-cloud-firestore

解决方案

我找到了一个解决方案：

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

@Component({
selector: 'app-search-component',
templateUrl: './search-component.component.html',
styleUrls: ['./search-component.component.css']
})
export class SearchComponentComponent implements OnInit  {

 displayedColumns = ['ImageUrl'];

 ngOnInit(): void {
}
 searchValue: string = "";
 dataSource: any;

 constructor(public afs: AngularFirestore) {
 }





 getStudents() {
this.dataSource = this.afs.collection('Blogs', ref => ref.where('title', '==', this.searchValue)).valueChanges();
}

}

推荐阅读