Angular4中如何获取过滤后结果数组的长度？

首先得先把你的自定义过滤管道补全，不然连过滤功能都没法用对吧？先给你写个完整的管道实现，假设我们按type字段来过滤，你可以根据需求调整匹配的字段：

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

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    // 处理空值情况，避免报错
    if (!items) return [];
    if (!searchText) return items;
    
    // 统一转小写，实现不区分大小写的搜索
    searchText = searchText.toLowerCase();
    return items.filter(item => {
      // 这里可以扩展成匹配多个字段，比如name+type
      return item.type.toLowerCase().includes(searchText);
    });
  }
}

记得要在你的模块的declarations数组里注册这个管道，不然组件里用不了哦。

接下来给你两种常用的获取过滤后长度的方式：

方式一：直接在模板中获取（最简单） #

你可以在模板里把过滤后的结果赋值给一个模板变量，然后直接取它的length属性，这样不用动组件TS代码，非常方便：

<!-- 假设用ngModel绑定搜索输入框的值 -->
<input type="text" [(ngModel)]="searchValue" placeholder="输入类型搜索">

<!-- 把过滤后的结果存到filteredResult变量里 -->
<div *ngIf="(filterArray | filter: searchValue) as filteredResult">
  <!-- 直接显示长度 -->
  <p>当前过滤结果共 {{ filteredResult.length }} 条</p>
  
  <!-- 渲染过滤后的列表，你的@ViewChildren也能正常拿到这些元素 -->
  <div *ngFor="let item of filteredResult" #filterRef>
    {{ item.name }} - {{ item.type }}
  </div>
</div>

方式二：在组件TS中计算（适合需要用这个长度做逻辑处理的场景） #

如果你需要在组件代码里用到这个长度值（比如做一些条件判断、请求接口之类的），可以在组件里注入管道，然后手动调用它的transform方法来计算：

首先在组件里注入管道，然后监听搜索值的变化来更新长度：

import { Component, ViewChildren, ElementRef } from '@angular/core';
import { FilterPipe } from './filter.pipe'; // 导入你的管道

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  providers: [FilterPipe] // 把管道注入到组件里
})
export class YourComponent {
  filterArray = [
    {'id': 1, 'name': 'ABC', 'type': 'IT'},
    {'id': 2, 'name': 'XYZ', 'type': 'Tech'},
    {'id': 3, 'name': 'LMN', 'type': 'IT'},
    {'id': 4, 'name': 'PQR', 'type': 'Software'},
    {'id': 5, 'name': 'JKL', 'type': 'hardware'},
    {'id': 5, 'name': 'EFG', 'type': 'hardware'}
  ];
  @ViewChildren('filterRef') filtedItems;
  searchValue = '';
  filteredLength = 0; // 用来存过滤后的长度

  constructor(private filterPipe: FilterPipe) {}

  // 当搜索值变化时触发这个方法
  onSearchChanged() {
    // 调用管道的transform方法得到过滤后的数组
    const filteredResult = this.filterPipe.transform(this.filterArray, this.searchValue);
    this.filteredLength = filteredResult.length;
    // 这里可以做其他逻辑，比如打印或者根据长度做判断
    console.log('过滤后条数：', this.filteredLength);
  }
}

然后模板里绑定这个变量和事件：

<input type="text" [(ngModel)]="searchValue" (ngModelChange)="onSearchChanged()" placeholder="输入类型搜索">
<p>当前过滤结果共 {{ filteredLength }} 条</p>

<div *ngFor="let item of filterArray | filter: searchValue" #filterRef>
  {{ item.name }} - {{ item.type }}
</div>

另外提醒下，Angular4里用ngModel需要在模块里导入FormsModule哦，不然会报错。如果需要匹配多个字段（比如同时搜name和type），只要修改管道里的过滤逻辑就行，比如改成：

return item.name.toLowerCase().includes(searchText) || item.type.toLowerCase().includes(searchText);

内容的提问来源于stack exchange，提问作者Raghav