使用 Angular Pipe 2 在列表中搜索列表

Question

我在通过传递参数返回列表时遇到问题。我试图过滤的这个搜索来自另一个列表中的一个列表。如果我将“外部”列表中的字段作为字段传递，则返回工作正常。但我无法从列表元素里面过滤。我有一份员工名单，我试图将人们从他们所拥有的技能中筛选出来。如果我寻找名字，例如它有效，但我必须搜索他的技能描述。例如：我作为参数“json”传递，该方法返回具有 Json 技能的员工。有人能帮助我吗？谢谢。

certification: (3) [{…}, {…}, {…}]
gcm: 1
id_employee: 9
manager: "te"
name: "teste t"
project: {id_project: 2, name: "B3", customer: "Ibovespa", 
valueOfProject: 100000, dtBegin: "2018-07-20T03:00:00.000+0000", …}
role: "tete"
salary: 1234
skill: Array(3)
0: {id_skill: 8, descricao: null}
1:
  descricao: "json"
  id_skill: 9
  __proto__: Object
2: {id_skill: 10, descricao: "js"}
length: 3
__proto__: Array(0)
__proto__: Object
length: 5
__proto__: Array(0)
export class SearchFilterPipe implements PipeTransform {
transform(items: any[], field: string, value: string): any[] {
if (!items) return [];
return items.filter(it => it[field] == value);
}

Answer 1

使用args: any[] 声明的多参数管道，如下所示：

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

@Pipe({
  name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {
  transform(items: any[], args: any[]): any[] {
    if (!items) return [];
    return items.filter(it => it[args[0]] == args[1]);
  }
}

并像*ngFor="let skillItem of skill | searchFilter: ['descricao', 'json']" 那样以任何你想要的 html 方式使用它，比如：

<table>
  <thead>
    <th>ID</th>
    <th>Descricao</th>
  </thead>
  <tbody>
    <tr *ngFor="let skillItem of skill | searchFilter: ['descricao', 'json']">
      <td>{{skillItem.id_skill}}</td>
      <td>{{skillItem.descricao}}</td>
    </tr>
  </tbody>
</table>

创建了一个StackBlitz DEMO 供您查看完整的工作示例。