Question

我正在使用在这里找到的代码，并且已针对我的目的进行了修改。我唯一的问题是输入自动搜索文本后，我无法获得准确的记录数。不过，它对于组过滤器也可以。

感谢任何帮助。

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>

Answer 1

从您共享的代码中，我认为它是对象引用问题。
使用

this.filteredUsers = Object.assign([], this.filteredUsers);

在功能filterUserList()中的

为

filterUserList(filters: any, users: any): void {
    this.filteredUsers = this.users;     //Reset User List

    const keys = Object.keys(filters);
    const filterUser = user => keys.every(key => user[key] === filters[key]);

    this.filteredUsers = this.users.filter(filterUser);
    // added below with new object reference
    this.filteredUsers = Object.assign([], this.filteredUsers); 
    this.ref.detectChanges();
  }

Answer 2

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

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

2 个答案: