Filtrer le tableau en Angular

1. Réseau de filtres Angular 2 vs réseau de filtres Angular 1
2. Utilisez ngOnInit() pour filtrer le tableau dans Angular 2

La méthode filter() permet d’appliquer une fonction à chaque élément d’un tableau puis de retourner un nouveau tableau contenant uniquement les éléments pour lesquels la fonction a retourné vrai.

Vous pouvez utiliser la méthode filter() pour filtrer les éléments d’un tableau en fonction de leurs valeurs de propriété. Cet article traitera des détails complets du filtrage dans Angular 2.

Angular 2 est un framework MVW construit sur TypeScript et possède une architecture modèle-vue-peu importe. Il s’agit d’une réécriture complète d’Angular 1 et tire parti des dernières technologies Web.

Dans Angular 2, les tableaux sont représentés par le type Array. Par exemple, un tableau de chaînes peut être déclaré comme suit.

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

Réseau de filtres Angular 2 vs réseau de filtres Angular 1

Le filtre Angular 2 est un filtre de modèle qui prend une entrée et renvoie l’entrée transformée. Angular 2 a introduit le concept de pipes qui permet de modifier les données.

Les tuyaux sont créés à l’aide d’un pipe. La méthode pipe crée un nouveau pipe et l’enregistre avec le scope courant sous son nom.

Alors que Angular 1 a des filtres intégrés. Ces filtres peuvent être appliqués à une expression pour effectuer une opération spécifique sur le résultat de l’expression.

La méthode filter() est utilisée pour créer un filtre, et la méthode apply() est utilisée pour appliquer le filtre à une expression.

La différence entre le filtre Angular 2 et le filtre Angular 1 est que vous pouvez utiliser un tuyau pour enchaîner plusieurs filtres dans Angular 2. En revanche, vous devez utiliser des parenthèses pour enchaîner de nombreux filtres dans Angular 1.

Pour en savoir plus sur le réseau de filtres Angular, cliquez ici.

Créons maintenant un filtre dans Angular 2 étape par étape. Dans Angular 2, la première chose que nous faisons est de construire un nouveau Pipe. Voici à quoi cela ressemblera.

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

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

Utilisez ngOnInit() pour filtrer le tableau dans Angular 2

La principale chose utilisée dans le filtre Angular est ngOnInit(). Angular 2 a des crochets de cycle de vie que nous pouvons utiliser pour contrôler comment et quand les liaisons de données sont mises à jour.

Le ngOnInit() est invoqué immédiatement après le premier ngOnChanges(), et avant le ngDoCheck().

Le ngOnInit est l’un des crochets du cycle de vie. Angular appelle ngOnInit signal lorsque le composant est complètement initialisé.

Il faut importer OnInit depuis @angular/core pour utiliser ngOnInit() (en fait, ce n’est pas obligatoire, mais comme bonne pratique, importez le OnInit). Pour en savoir plus sur ngOnInit(), cliquez ici.

Lorsque vous utilisez angular-CLI pour créer un nouveau composant, ngOnInit est automatiquement inséré. Nous allons implémenter le ngOnInt() dans notre exemple.

ngOnInit() {
    this.setData();
  }

  setData() {
    this.dataObject = HelloData;
  }

Le code Typescript complet est donné ci-dessous.

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

    ]
  }
]

Après cela, nous commencerons à travailler sur le code HTML, et notre principale préoccupation est de travailler correctement sur ng-For.

La directive ng-For est utilisée pour parcourir une liste de valeurs et afficher chaque élément de la liste. Il peut être utilisé comme alternative à ng-repeat.

La directive ng-repeat est souvent plus appropriée lorsque le jeu de données contient de nombreux éléments et que nous souhaitons tous les afficher sur la page. Mais ici, nous utilisons un filtre de recherche pour afficher les résultats en fonction de la commande de recherche ; c’est pourquoi ng-For sera plus utile 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">

Le code HTML complet est donné ci-dessous.

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>

Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.