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 次。

app.component.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 样本

标签： javascriptangulartypescriptfilter

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;
    }
  }

工作堆栈闪电战