Matriz de filtros en Angular

1. Array de filtros de Angular 2 vs. Array de filtros de Angular 1
2. Use ngOnInit() para filtrar arrays en Angular 2

El método filter() le permite aplicar una función a cada elemento de un array y luego devolver una nueva matriz que contiene solo aquellos elementos para los que la función devolvió verdadero.

Puede usar el método filter() para filtrar elementos en un array por sus valores de propiedad. Este artículo discutirá los detalles completos del filtrado en Angular 2.

Angular 2 es un marco MVW construido en TypeScript y tiene una arquitectura de modelo-vista-lo que sea. Es una reescritura completa de Angular 1 y aprovecha las últimas tecnologías web.

En Angular 2, las matrices están representadas por el tipo Array. Por ejemplo, un array de cadenas podría declararse de la siguiente manera.

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

Array de filtros de Angular 2 vs. Array de filtros de Angular 1

El filtro Angular 2 es un filtro de plantilla que toma una entrada y devuelve la entrada transformada. Angular 2 introdujo el concepto de tuberías que proporciona una forma de cambiar los datos.

Las tuberías se crean utilizando un pipe. El método pipe() crea un nuevo pipe y lo registra con el scope actual bajo su nombre.

Mientras que Angular 1 tiene filtros incorporados. Estos filtros se pueden aplicar a una expresión para realizar una operación específica en el resultado de la expresión.

El método filter() se usa para crear un filtro, y el método apply() se usa para aplicar el filtro a una expresión.

La diferencia entre el filtro Angular 2 y el filtro Angular 1 es que puede usar una tubería para encadenar varios filtros en Angular 2. Por el contrario, debe usar paréntesis para encadenar numerosos filtros en Angular 1.

Para obtener más información sobre la matriz de filtros Angular, haga clic aquí.

Ahora vamos a crear un filtro en Angular 2 paso a paso. En Angular 2, lo primero que hacemos es construir un nuevo Pipe. A continuación se muestra cómo se verá.

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

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

Use ngOnInit() para filtrar arrays en Angular 2

Lo principal que se usa en el filtro Angular es ngOnInit(). Angular 2 tiene ganchos de bucle de vida que podemos usar para controlar cómo y cuándo se actualizan los enlaces de datos.

El ngOnInit() se invoca inmediatamente después del primer ngOnChanges(), y antes del ngDoCheck().

El ngOnInit es uno de los ganchos del bucle de vida. Las llamadas Angular ngOnInit() señalan cuando el componente está completamente inicializado.

Debemos importar OnInit desde @angular/core para usar ngOnInit() (en realidad, no es obligatorio, pero como buena práctica, importa OnInit). Para obtener más información sobre ngOnInit, haga clic aquí.

Cuando usa angular-CLI para crear un nuevo componente, ngOnInit se inserta automáticamente. Implementaremos el ngOnInt() en nuestro ejemplo.

ngOnInit() {
    this.setData();
  }

  setData() {
    this.dataObject = HelloData;
  }

El código completo de TypeScript se proporciona a continuación.

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
      },

    ]
  }
]

Después de eso, comenzaremos a trabajar en el código HTML, y nuestra principal preocupación es trabajar en ng-For correctamente.

La directiva ng-For se utiliza para iterar sobre una lista de valores y mostrar cada elemento de la lista. Se puede utilizar como alternativa a ng-repeat.

La directiva ng-repeat a menudo es más apropiada cuando el conjunto de datos contiene muchos elementos y queremos mostrarlos todos en la página. Pero aquí estamos usando un filtro de búsqueda para mostrar los resultados según el comando de búsqueda; por eso será más útil ng-For que 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">

El código HTML completo se proporciona a continuación.

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>

Haga clic aquí para ver la demostración en vivo del código anterior.