Question

我正在开发一个Angular2应用程序，我需要为我的一些*ngFor指令使用过滤器。

我创建了以下Pipe：

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

@Pipe({
    name: 'filter',
    pure: false
})
export class FilterPipe implements PipeTransform {
    transform(array: Array<Object>, key: string, value: string, negate: boolean): Array<Object> {
        if (array === null || array === undefined) {
            return [];
        } else {
            if (negate) {
                return array.filter(item => item[key] !== value);
            } else {
                return array.filter(item => item[key] === value);
            }
        }
    }
}

以下是我如何使用它的示例：

<div class="item" *ngFor="let i of items | filter:'type':'S':true">

但如果我要过滤子属性，它就不起作用。使用Angular v1.x，我可以应用以下过滤器：

item in array | filter: { type: {subtype: 'foo'}}

你知道我怎么能用我的Angular2管道达到同样的效果？提前谢谢。

Answer 1

您可以这样做：

使用此方法或创建自己的方法来提取深层（甚至不是深层属性）：

{"Invalid object name 'dbo.ActivityMaps'."} System.Exception {System.Data.SqlClient.SqlException}

现在，您将管道调整为：

getProperty(obj: any, path: string): string { 
  if (obj == null || obj.constructor !== Object) {
    return undefined;
  }

  const replaced: string = path.replace(/\[(\w+)\]/g, '.$1').replace(/^\./, '');
  const keys: string[] = replaced.split('.');
  let result: string = obj[keys.shift()];

  for (const key of keys) {
    if (result == null || result.constructor !== Object) {
      return undefined;
    }

    result = result[key];
  }

  return result;
}

使用它：

@Pipe({
  name: 'filterBy',
  pure: false
})
export class FilterByPipe implements PipeTransform {

  transform(items: any[], prop: string, term: string, exact: boolean = false): any[] {

    if (!Array.isArray(items) || typeof term !== 'string') {
      return items;
    }

    const strTerm: string = `${term}`.toLowerCase();

    return items.filter((obj: any) => {
      const value: string = this.getProperty(obj, prop);
      if (!value) {
        return false;
      }

      const strValue: string = `${value}`.toLowerCase();  
      return exact
          ? strTerm === strValue
          : strValue.indexOf(strTerm) !== -1;
    });
  }

或

<div *ngFor="let item of items | filterBy: 'nestedObj.key': search: exact">

Link to SO article

更新＃1：

根据OP的要求，有一个版本接受另一个参数（<div *ngFor="let item of items | filterBy: 'nestedObj[key]': search: exact">）：

negate

或

<div *ngFor="let item of items | filterBy: 'nestedObj.key': search: exact: negate">

DEMO

PS ：请注意<div *ngFor="let item of items | filterBy: 'nestedObj[key]': search: exact: negate">和exact是选项，如果不存在，则自动为negate。

Answer 2

这是一个实现过滤管

的工作Plunkr

您只需确保使用正确的模板语法。

<span *ngFor="let item of items | filter:'key':'value'">
      {{item}}
</span>

支持多个参数。

将每个param与:

分开

{{ myData | myPipe: arg1:arg2:arg3... }}

如何创建一个Angular2过滤器管道，如Angular1过滤器？

2 个答案:

更新＃1：

这是一个实现过滤管