Question

我目前正致力于角5和火店。我有一个可观察的数组活动，它有一个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添加搜索方法的功能。我按照了很多教程进行过滤，但没有任何效果。我是棱角分明的新手。

Answer 1

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

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'))
    )

Answer 2

您可以在客户端使用角度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());
    })
  }
}

现在在term:string;班级

中定义component.ts

在你的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>

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

2 个答案: