Question

我尝试创建一个搜索栏来查询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>

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

标题，正文，图像

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

Answer 1

我找到了解决方法：

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

}

角创建Firestore的搜索栏

1 个答案: