如何获取角管道中过滤记录的计数答案

【问题标题】：How to get a count of filtered records in angular pipe如何获取角管道中过滤记录的计数
【发布时间】：2019-08-19 23:53:19
【问题描述】：

我正在使用我在此处找到并为我的目的进行了修改的代码。我唯一的问题是在输入自动搜索文本后我无法获得准确的记录计数。不过，它适用于组过滤器。

感谢任何帮助。

http://stackblitz.com/edit/ng6-multiple-search-values-q3qgig

<form novalidate [formGroup]="form">

    <h3>Auto Search</h3>
    <input type="text" class="form-control" #searchText (input)="autoSearch.emit(searchText.value)">

    <hr/>

    <h3>Group Filter</h3>
    <div class="row">
        <div class="col-md-3 col-sm-3">
            <select class="form-control" formControlName="prefix">
                <option value="">Prefix</option>
                <option value="MR">MR</option>
                <option value="MS">MS</option>
            </select>
        </div>

        <div class="col-md-3 col-sm-3">
            <button class="btn btn-primary" (click)="search(form.value)">Search</button>
        </div>
    </div>

</form>

<table class="table table-responsive">
    <tr>
        <th>Name</th>
        <th>Prefix</th>
        <th>Email</th>
        <th>Position</th>
        <th>Gender</th>
    </tr>

    <tbody>
        <tr *ngFor="let user of filteredUsers | filter: searchByKeyword">
            <td>{{ user.name }}</td>
            <td>{{ user.prefix }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.position }}</td>
            <td>{{ user.gender }}</td>
        </tr>
    </tbody>
</table>
<div>Count: {{ filteredUsers.length }}</div>

【问题讨论】：

因此，当我在“自动搜索”框中键入时，计数不会改变。
计数：{{filteredUsers.length }}
分享整个 stackblitz 代码
我已经根据假设发布了我的答案，一旦你分享了 stackblitz 代码，我就可以在那里检查实际问题。
@flakfizer 如果问题仍然存在，请分享可编辑的 stackblitz 示例
stackblitz.com/edit/ng6-multiple-search-values-q3qgig

标签： javascript angular typescript

【解决方案1】：

在https://stackoverflow.com/a/49038992/11248888找到答案

在组件 ts 中添加了一个保存当前计数的字段

filteredCount = { count: 0 };

在组件html中添加filteredCount作为过滤管道的参数

<tr *ngFor="let user of filteredUsers | filter:searchByKeyword:filteredCount">

将 filterMetadata.count 插入到显示所显示记录数的元素中。

<div>AutoSearch Count: {{filteredCount.count}}</div>

在过滤器管道中添加filteredCount .count 字段，完成过滤

transform(items, ..., filterMetadata) {
    // filtering
    let filteredItems = filter(items);

    filteredCount.count = filteredItems.length;
    return filteredItems;
  }

【讨论】：