迹忆客 专注技术分享

filter() 方法允许你将函数应用于数组的每个元素，然后返回一个新数组，该数组仅包含函数返回 true 的那些元素。

你可以使用 filter() 方法通过属性值过滤出数组中的元素。本文将讨论 Angular 2 中过滤的完整细节。

Angular 2 是一个基于 TypeScript 的 MVW 框架，具有模型-视图-任意架构。它是对 Angular 1 的完全重写，并利用了最新的 Web 技术。

在 Angular 2 中，数组由类型 Array 表示。例如，可以如下声明一个字符串数组。

var myArray = new Array();
myArray.push("John");
myArray.push("Mary");
myArray.push("Anna");
// myArray contains "John", "Mary" and "Anna"

Angular 2 过滤数组与 Angular 1 过滤数组

Angular 2 过滤器是一个模板过滤器，它接受输入并返回转换后的输入。Angular 2 引入了管道的概念，它提供了一种更改数据的方式。

管道是使用 pipe 创建的。pipe() 方法创建一个新的 pipe 并将其注册到当前 scope 的名称下。

而 Angular 1 有内置的过滤器。这些过滤器可应用于表达式以对表达式的结果执行特定操作。

filter() 方法用于创建过滤器，apply() 方法用于将过滤器应用于表达式。

Angular 2 过滤器和 Angular 1 过滤器之间的区别在于，你可以在 Angular 2 中使用管道将多个过滤器链接在一起。相反，你需要使用括号来链接 Angular 1 中的多个过滤器。

现在让我们一步一步地在 Angular 2 中创建一个过滤器。在 Angular 2 中，我们做的第一件事就是构造一个新的 Pipe。下面是它的外观。

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

@Pipe({
  name: 'AgePipe'
})
export class AgePipe {}

使用 ngOnInit() 在 Angular 2 中过滤数组

Angular 过滤器中使用的主要内容是 ngOnInit()。Angular 2 有生命周期钩子，我们可以使用它来控制数据绑定的更新方式和时间。

ngOnInit() 在第一个 ngOnChanges() 之后和 ngDoCheck() 之前立即调用。

ngOnInit 是生命周期钩子之一。当组件完全初始化时，Angular 会调用 ngOnInit() 信号。

我们必须从 @angular/core 导入 OnInit 才能使用 ngOnInit()（实际上，这不是必需的，但作为一种好的做法，导入 OnInit）。要了解有关 ngOnInit 的更多信息，请单击此处。

当你使用 angular-CLI 创建新组件时，ngOnInit 会自动插入。我们将在示例中实现 ngOnInt()。

ngOnInit() {
    this.setData();
  }

  setData() {
    this.dataObject = HelloData;
  }

完整的 Typescript 代码如下所示。

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

@Pipe({
  name: 'AgePipe'
})
export class AgePipe { }
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  dataObject = [];
  filter = { RegCategoryName: '' }
  constructor() { }
  ngOnInit() {
    this.setData();
  }
  setData() {
    this.dataObject = HelloData;
  }
  filterIt($event) {
    this.filter.RegCategoryName = $event.target.value;
    this.dataObject = HelloData.filter(value => {
      const data = { ...value };
      data.List = data.List.map(ch => {
        const list = { ...ch };
        list.RegistrationCategory = list.RegistrationCategory.filter(gChild => {
          return gChild.RegCategoryName.toLowerCase().indexOf(this.filter.RegCategoryName.toLowerCase()) !== -1
        });
        return list;
      });
      return data.List.some(list => !!list.RegistrationCategory.length);
    });
  }
}
const HelloData = [
  {
    "BookId": 1,
    "Book": {
      "BookId": 1,
      "BookName": "When Life Begins",
    },
    "List": [
      {
        "RegistrationCategory": [
          {
            "RegistrationCategoryId": 203,
            "RegCategoryName": "Abu Yahya"
          }
        ],
        "viewMore": false
      }
    ]
  },
  {
    "BookId": 2,
    "Book": {
      "BookId": 2,
      "BookName": "British History",

    },
    "List": [

      {
        "RegistrationCategory": [
          {
            "RegistrationCategoryId": 204,
            "RegCategoryName": "Usman"
          }
        ],
        "viewMore": false
      }
    ]
  },
  {
    "BookId": 3,
    "Book": {
      "BookId": 3,
      "BookName": "Holidays",
    },
    "List": [
      {
        "BookId": 3,

        "RegistrationCategory": [
          {
            "RegistrationCategoryId": 205,
            "RegCategoryName": "Egon Homtic"
          }
        ],
        "viewMore": false
      }
    ]
  },
  {
    "BookId": 4,
    "Book": {
      "BookId": 4,
      "BookName": "Destination",
      "ShortCode": "ABC04",
    },
    "List": [
      {
        "RegistrationCategory": [
          {
            "RegistrationCategoryId": 205,
            "RegCategoryName": "Steve Jobs"
          }
        ],
        "viewMore": false
      },

    ]
  }
]

之后，我们将开始处理 HTML 代码，我们主要关心的是正确处理 ng-For。

ng-For 指令用于遍历值列表并显示列表中的每个项目。它可以用作 ng-repeat 的替代品。

ng-repeat 指令通常在数据集包含许多项目时更合适，并且我们希望将它们全部显示在页面上。但是在这里，我们使用搜索过滤器来根据搜索命令显示结果；这就是为什么 ng-For 比 ng-repeat 更有用的原因。

 <tr *ngFor="let data of dataObject">
    <td>{{data.Book.BookName}}</td>
    <td>
      <div *ngFor="let cat of data.List">
        <div *ngFor="let child of cat.RegistrationCategory">

完整的 HTML 代码如下所示。

Search by Id : <input type="text" (keyup)="filterIt($event)">
<table>
  <tr>
    <th>Books</th>
    <th>Book Author (ID) Write Author name in the above search bar and see the magic of Angular 2 Filter</th>
  </tr>
  <tr *ngFor="let data of dataObject">
    <td>{{data.Book.BookName}}</td>
    <td>
      <div *ngFor="let cat of data.List">
        <div *ngFor="let child of cat.RegistrationCategory">
          {{child.RegCategoryName}}
        </div>
      </div>
    </td>
  </tr>
</table>