在角度 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. 在 *ngFor " 中最后缺少。

3. ngFor 只適用於數組而不適用於對象，所以 this.activites 必須是一個數組，否則它會給出同樣的錯誤。