在 Observable 数组中添加搜索过滤器答案

【问题标题】：Add search filter in an Observable array在 Observable 数组中添加搜索过滤器
【发布时间】：2018-04-11 19:25:25
【问题描述】：

我目前正在研究 Angular 5 和 Firestore。我有一个可观察的数组 activities ，其中有一个 firestore 集合。我将 firestore 的领域理解为：

   activities: Observable<any[]>;
    this.activities = this.afs.collection('activities').valueChanges();

还有显示活动价值的表格：

 <table class="table">
    <thead>
      <tr>
        <th>Section</th>
       <th>Name</th>
       <th>Max Players</th>
       <th >Locked</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let activity of activities | async >

               <td>
                 {{activity.section}}

               </td>
               <td >
                 {{activity.name}}
               </td>
               <td>
               {{activity.maxPlayers}}
             </td>

               <td>
                 {{activity.locked}}
               </td>
          </tr>
        </tbody>
       </table>

现在我想通过 activity.name 添加搜索方法的功能。我遵循了很多过滤教程，但没有任何效果。我是 Angular 新手。

【问题讨论】：

标签： angular google-cloud-firestore angularfire2

【解决方案1】：

您可以在客户端使用 angular pipes 实现它

首先生成一个管道

ng g pipe pipes/activityfilter

这里pipes/是目录，你可以任意命名。如果您不使用angular cli，则必须手动创建它。现在你的activityfilter.pipe.ts 应该是这样的

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'activityfilter'
})
export class ActivityfilterPipe implements PipeTransform {

  transform(activities: any, term?: any): any {
    if( term === undefined) return activities;
    return activities.filter(function(activity){
      return activity.name.toLowerCase().includes(term.toLowerCase());
    })
  }
}

现在在 component.ts 类中定义 term:string;

并在您的 html 中添加输入并绑定到 term

<input name="search"  type="text" placeholder="Search..."  [(ngModel)]="term"> 

<table class="table">
<thead>
  <tr>
    <th>Section</th>
   <th>Name</th>
   <th>Max Players</th>
   <th >Locked</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let activity of activities | async | activityfilter:term>

           <td>
             {{activity.section}}

           </td>
           <td >
             {{activity.name}}
           </td>
           <td>
           {{activity.maxPlayers}}
         </td>

           <td>
             {{activity.locked}}
           </td>
      </tr>
    </tbody>
   </table>

【讨论】：

完美运行。谢谢你的帮助。你真的很棒:)

【解决方案2】：

您正在寻找的是查询，在服务器而不是客户端上搜索：

const joggings = 
    this.afs.collection('activities', ref => ref.where('name', '==', 'jogging'))
    .valueChanges();

请参阅angularfire2 docs，了解您可以对查询进行更多操作。

但是，要在客户端过滤可观察结果中的数组，一种方法是使用 map 运算符和 Array.prototype.filter：

import {map} from 'rxjs/operators';
const joggings = 
    this.afs.collection('activities')
    .valueChanges()
    .pipe(
        map(items => items.filter(item => item.name === 'jogging'))
    )

【讨论】：