如何在过滤列表中获取多个项目？

Question

所以，我有一个过滤管道并使用它来过滤城市列表以仅显示包含搜索词的城市。

import {Pipe, PipeTransform} from '@angular/core';

    @Pipe({ name: 'filter' })
    export class FilterPipe implements PipeTransform{
        transform(value: any, arg: string) {
            var searchTerm = arg ? arg : '';
            searchTerm = searchTerm.toUpperCase();
            if (value == null) return null;
            return value.filter(el => el.City.toUpperCase().indexOf(searchTerm) !== -1);
        }
    }

但我拥有的城市数组中有 5000 个项目，因此我使用切片管道仅显示其中五个。

<form [formGroup]="form">
  <input formControlName="search" type="text">
  <div>
    <li 
    *ngFor="let city of cities | filter:searchTerm | slice:0:5"
    (click)="PasteCity(city.City)">
      {{ city.City }}
    </li>
  </div>
</form>

但是有一个问题。我需要向用户显示找到了多少个城市，例如“显示 5 0f 631 个城市”。 据我尝试，ViewChildren 和索引*ngFor 方法的最后一个元素只让我得到了显示的城市数量，没有被过滤器找到......但是在尝试使用ViewChildren 时我遇到了一个错误并很快被刮掉了这个想法

Answer 1

你试过了吗

(cities | filter:searchTerm).length 

?