在具有 Angular 管道 2 的列表中搜索列表

Question

我在传递参数时遇到问题return。我试图过滤的这个搜索来自另一个列表中的列表。如果我将 "outside" 列表中的一个字段作为字段传递，则 return 可以正常工作。但是我不能从列表里面过滤元素。我有一份员工名单，我试图从这些员工的技能中筛选出他们。例如，如果我查找名称，它会起作用，但我必须搜索他的技能描述。例如：我将具有 Json 技能的员工作为参数 "json" 和方法 return 传递。有人能帮助我吗？谢谢。

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 供您查看完整的工作示例。

在具有 Angular 管道 2 的列表中搜索列表

Search in List within List with Angular Pipe 2

javascript

java

angular

typescript

angular2-routing