如何根据角度 7 中的多个属性进行过滤

Question

我是使用 Angular 的新手，现在正在学习如何创建管道来过滤数据。我能够这样做，但有人可以给我一些关于如何基于多个属性进行过滤的想法

按名称过滤

 <mat-card  *ngFor="let item of model | searchFilter:searchTerm">
<mat-card-title>
  {{ item.title }}
</mat-card-title>

现在我必须根据项目属性进行过滤

<mat-card-content>
  <div *ngFor="let property of item.properties">
    {{ (property.labelVisible ? property.label + ' ' : '') + property.value }}
  </div>

搜索过滤管道

import {Pipe, PipeTransform} from '@angular/core';
import {Card} from "./card";

@Pipe({
name:'searchFilter'
})
export class SearchFilterPipe implements PipeTransform{
transform(model: Card<any>[], searchTerm:string):Card<any>[]
{
if(!model || !searchTerm){
  return model
}
return model.filter(item =>item.title.toLowerCase().indexOf(searchTerm.toLowerCase())!== -1)
}
}

Answer 1

我强烈建议不要使用管道来过滤数据，这会带来性能损失，而且它还可以防止你的项目被过度压缩，附录部分对此进行了解释https://angular.io/guide/pipes。

更好的选择是调用组件函数来执行所需的过滤，或者如果您需要在许多地方使用相同的过滤，您可以使用注入的角度服务https://angular.io/guide/architecture-services

Answer 2

  For searchTerm in component file don't make it as string, make it as a object which has all your object properties like below


   searchTerm = {title: "", location: "" ...}

   and in the search filter pipe**        


import { Pipe, PipeTransform } from '@angular/core';
import { Card } from "./card";

@Pipe({
     name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {
     transform(model: Card<any>[], searchTerm: Object): Card<any>[] {
          if (!model || !searchTerm) {
               return model
          }
          return model.filter(item => {
               return Object.keys(item).filter(function (key, index) {
                    return 
          item[key].toLowerCase().indexOf(searchTerm[key].toLowerCase()) 
          !== -1
               }).length > 0;

          })
     }
}

 *OR*

 use module ngx-filter-pipe, which makes life easier
 do npm  i -S ngx-filter-pipe
 then import the module appModule then in the component add following code

             sampleData = [{id:1, name:'xyz', location:'india'},
                       {id:2, name:'abc', location: 'USA'}
                     ]
              userFilter: any = { name: '' , location: ''};

        And HTML part looks like this


        //add search box here for multiple inputs
        <ul>
              <li *ngFor="let user of users | filterBy: userFilter">{{ user.name }}</li>

              <!-- in case you want to show empty message -->
              <li *ngIf="(users | filterBy: userFilter).length === 0">No matching elements</li>
            </ul>