javascript - 我应该使用什么来根据过滤器选择获取更新的计数？

Question

我正在使用 CSV 上传并在表格中显示数据以及使用自定义表格过滤器管道功能。
如何获得基于过滤器部分的过滤计数？
例如考虑到您的 csv 有 7 行，上传数据后；它将显示 7 条记录中的 7 条。
当您根据性别男/女过滤时，我应该得到 Showing 4 of 7 Records 或 Showing 3 of 7 Records
我在下面尝试过我没有得到结果。

Showing {{filteredUsers.length}} of {{dataList.length}} Records

如果我这样做:

<strong class="ml-3" *ngFor="let record of dataList | tableFilter: form.value as filteredUsers">
Showing {{filteredUsers.length}} of {{dataList.length}} Records
</strong>

我也根据过滤器选择来更新计数 n，但它根据行数重复，因此出现 7 次。
应用程序组件.html

<form #form="ngForm">
<select class="form-control form-control-sm" name="gender" ngModel>
<option value="" selected>All</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</form>

<tr *ngFor="let record of dataList | tableFilter: form.value as filteredUsers">
<td> {{record.name}} </td>
<td> {{record.gender}} </td>
</tr>

直播: https://stackblitz.com/edit/angular-csv-parser-aazvnq?file=app%2Fapp.component.html
CSV 示例

Answer 1

我建议采用与 Nicholas 的解决方案略有不同的方法 - 而不是每次更改时更新两个项目，您可以让管道函数更新代表计数的变量 - 这样，一个地方负责处理计数和过滤，这需要在组件中添加一个对象:

countObj = { count: 0 };

在模板中:

Showing {{countObj.count}} Records
...
<tr *ngFor="let record of dataList | tableFilter: form.value:countObj">

并在变换函数中:

  transform(list: any[], filters: Object, countObj: any) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = user => keys.every(key => user[key] === filters[key]);

    if (keys.length) {
      const res = list.filter(filterUser);
      countObj.count = res.length;
      return res;
    } else {
      countObj.count = list.length;
      return list;
    }
  }

working stackblitz