Angular & Firebase - 如何集成搜索返回的 Firebase 列表的搜索栏

Question

我在用什么

• 角
• 火力基地

我想要实现的目标

• 我有一个从火库返回的项目列表

• 它们显示在一个大列表中，并包含缩略图、标题和日期等元数据。

我想在列表

• 顶部包含一个输入字段/搜索栏，允许我根据标题或日期(输入的内容(过滤列表

• 在去年的某个时候，当我简要地看一下角度时，我看到有人在搜索框中添加了一个简单的角度属性，并在列表中添加了另一个属性，它只是工作。我不知道 Angular2 中是否是这种情况

问题

1. 如何在下面的代码中实现搜索栏过滤器？
2. 当尝试过滤返回的 firebase 项目列表时，每个搜索都会查询 firebase(我想避免这种情况(，还是在 DOM 客户端查询项目？

注意

• 我对这个东西非常陌生，在过去的一个月里只在使用 angular 和 firebase，所以在这里非常感谢任何帮助。

项目解析程序

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { AuthService } from '../../user/auth.service';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import 'rxjs/add/operator/first';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ProjectsListResolver {
constructor(private database: AngularFireDatabase, private authService: AuthService) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
return Observable.create(observer => {
this.authService.user
.first()
.subscribe(user => {
this.database.list(`/project_list/${user.uid}`)
.first()
.subscribe(projectList => {
observer.next(projectList);
observer.complete();
});
});
});
}
}

项目组件 TS

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
// Firebase
import { FirebaseListObservable } from 'angularfire2/database';
// Services
import { AuthService } from '../../user/auth.service'
import { NavigationService } from '../../navigation-service/navigation-service.service';

@Component({
selector: 'app-marketplace',
templateUrl: './projects-list.component.html',
styleUrls: ['./projects-list.component.css']
})
export class ProjectsListComponent implements OnInit {
projectsList: FirebaseListObservable<any[]>;
constructor(
private router: Router,
private authService: AuthService,
private activatedRoute: ActivatedRoute,
public nav: NavigationService
) {}

ngOnInit() {
// Returns the data from the projects list resolver
this.activatedRoute.data
.subscribe((
data: { projectListData: any }) => {
this.projectsList = data.projectListData;
});
}

}

项目组件网页

<input type="text" placeholder="Search for a project..."/>
<ul class="list__ul" *ngIf="projectsList">
<li class="list__li" *ngFor="let project of projectsList">
<ul class="list__meta">
<li>
<h2 (click)="goToDetailPage(project)"> {{ project.project_title }} </h2>
</li>
<li>
<span> {{ project.project_date }} </span> 
</li>
</ul>
</li>
</ul>

Answer 1

这个特性在Angularjs中，但在Angular2+中没有

Angular 不提供用于过滤或排序列表的管道。熟悉AngularJS的开发人员将这些称为filter和orderBy。在 Angular 中没有等价物。

这不是疏忽。Angular 不提供这样的管道，因为它们性能不佳并防止激进的缩小。Filter 和 orderBy 都需要引用对象属性的参数。在本页前面，您了解到此类管道必须是不纯的，并且 Angular 几乎在每个更改检测周期中都会调用不纯管道。

过滤，尤其是排序是昂贵的操作。即使是中等大小的列表，当 Angular 每秒多次调用这些管道方法时，用户体验也会严重下降。filter和orderby经常在AngularJS应用程序中被滥用，导致人们抱怨Angular本身很慢。从间接意义上讲，这种指控是公平的，因为AngularJS首先通过提供filter和orderby来准备这个性能陷阱。

您可以为此创建自己的管道：https://angular.io/guide/pipes