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

Question

我有一个对象数组，我试图使用搜索值

进行过滤

component ts

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;

custom pipe

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (value && args) {
      const arr = value.filter((e: any) => e.type.toLowerCase() === args.toLowerCase());
      if (arr.length > 0) {
        return arr;
      } else {
        return [];
      }
    }
    return value;
  }

}

HTML

Search : <input type="text" name="search" [(ngModel)]="search">
<ul *ngFor="let item of filterArray | filter: search as result" #filterRef>
        <li>{{item.name}}</li>
    </ul>
    Filtered Length : {{filtedItems?.length}}

我试图让过滤后的结果数组的长度低于错误

任何人都可以帮我解决这个问题吗？..

Answer 1

如果应该使用管道进行过滤，唯一的可能是在周围的环境中进行：

<ng-container *ngIf="filterArray | filter: search as result">
    <ul *ngFor="let item of result" #filterRef>
        <li>{{item.name}}</li>
    </ul>
    <p>{{result?.length}}</p>
</ng-container>