在角度 5 的表格上添加搜索过滤器

Question

我正在使用 Angular 5 打字稿。我想在我的表中添加搜索过滤器。我正在从 Firestore 中检索活动集合：

 this.activities = this.afs.collection('activities').valueChanges();

并使用 ngFor 以 boostrap 表的形式显示字段。

  <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>
           </table>

现在我想添加过滤搜索。我怎样才能做到这一点？我看到了一些关于数据过滤的教程，但它们适用于数组，但我的收集活动没有任何数组。

Answer 1

我写了一个非常简单易用的库ss-search。

在您的情况下，您将执行以下操作：

search(await activities, ["section", "name", "maxPlayers", "locked"], "SEARCH_TERM")

这将过滤掉数据，只返回包含您的搜索词的结果。

Answer 2

首先有几点：

1. </tbody> 丢失。

2. in *ngFor " 的末尾缺少。

3. ngFor 仅适用于数组，不适用于对象，因此 this.activites 必须是数组，否则会出现相同的错误。