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

Question

我用的是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

首先，有几点：

>

<代码>

末尾缺少in *ngFor"。

ngFor只适用于数组，而不适用于对象，所以这一点。activites必须是一个数组，否则它将给出相同的错误。

Answer 2

我写了一个非常简单的使用库ss搜索。

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

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

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