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

首先，有一些要点：

composer archive缺失。
in * ngFor＆＃34;最后遗失了。
ngFor仅适用于数组而不适用于对象，因此this.activites必须是一个数组，否则会产生相同的错误。

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

2 个答案: