Filter-array in Angular

1. Angular 2-Filterarray vs. Angular 1-Filterarray
2. Verwendung von ngOnInit() zum Filtern von Array in Angular 2

Mit der Methode filter() können Sie eine Funktion auf jedes Element eines Arrays anwenden und dann ein neues Array zurückgeben, das nur die Elemente enthält, für die die Funktion wahr zurückgegeben hat.

Sie können die Methode filter() verwenden, um Elemente in einem Array nach ihren Eigenschaftswerten herauszufiltern. In diesem Artikel werden alle Details der Filterung in Angular 2 besprochen.

Angular 2 ist ein MVW-Framework, das auf TypeScript aufbaut und eine Model-View-Whatever-Architektur hat. Es ist eine komplette Neufassung von Angular 1 und nutzt die neuesten Webtechnologien.

Arrays werden in Angular 2 durch den Typ Array repräsentiert. Beispielsweise könnte ein Array von Zeichenfolgen wie folgt deklariert werden.

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

Angular 2-Filterarray vs. Angular 1-Filterarray

Der Angular 2-Filter ist ein Vorlagenfilter, der eine Eingabe entgegennimmt und die transformierte Eingabe zurückgibt. Angular 2 führte das Konzept der pipes ein, das eine Möglichkeit bietet, Daten zu ändern.

Pipes werden mit Hilfe einer pipe erstellt. Die Methode pipe() erstellt eine neue pipe und registriert sie beim aktuellen scope unter ihrem Namen.

Während Angular 1 eingebaute Filter hat. Diese Filter können auf einen Ausdruck angewendet werden, um eine bestimmte Operation mit dem Ergebnis des Ausdrucks auszuführen.

Die Methode filter() wird verwendet, um einen Filter zu erstellen, und die Methode apply() wird verwendet, um den Filter auf einen Ausdruck anzuwenden.

Der Unterschied zwischen dem Angular 2-Filter und dem Angular 1-Filter besteht darin, dass Sie eine Pipe verwenden können, um mehrere Filter in Angular 2 miteinander zu verketten. Im Gegensatz dazu müssen Sie Klammern verwenden, um zahlreiche Filter in Angular 1 zu verketten.

Um mehr über das Angular-Filter-Array zu erfahren, hier klicken.

Lassen Sie uns nun Schritt für Schritt einen Filter in Angular 2 erstellen. In Angular 2 konstruieren wir als erstes eine neue Pipe. Unten ist, wie es aussehen wird.

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

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

Verwendung von ngOnInit() zum Filtern von Array in Angular 2

Im Angular-Filter wird hauptsächlich ngOnInit() verwendet. Angular 2 verfügt über Lebenszyklus-Hooks, mit denen wir steuern können, wie und wann Datenbindungen aktualisiert werden.

Das ngOnInit() wird unmittelbar nach dem ersten ngOnChanges() und vor dem ngDoCheck() aufgerufen.

Der ngOnInit ist einer der Lifecycle-Hooks. Angular ruft ngOnInit() auf, wenn die Komponente vollständig initialisiert ist.

Wir müssen OnInit aus @angular/core importieren, um ngOnInit() zu verwenden (eigentlich ist es nicht erforderlich, aber als bewährte Methode importieren Sie OnInit). Um mehr über ngOnInit zu erfahren, hier klicken.

Wenn Sie mit angular-CLI eine neue Komponente erstellen, wird ngOnInit automatisch eingefügt. In unserem Beispiel implementieren wir das ngOnInt().

ngOnInit() {
    this.setData();
  }

  setData() {
    this.dataObject = HelloData;
  }

Der vollständige Typescript-Code ist unten angegeben.

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

    ]
  }
]

Danach werden wir mit der Arbeit am HTML-Code beginnen, und unser Hauptanliegen ist es, an ng-For richtig zu arbeiten.

Die Direktive ng-For wird verwendet, um eine Werteliste zu durchlaufen und jedes Element in der Liste anzuzeigen. Es kann alternativ zu ng-repeat verwendet werden.

Die Direktive ng-repeat ist oft besser geeignet, wenn der Datensatz viele Elemente enthält und wir sie alle auf der Seite anzeigen möchten. Aber hier verwenden wir einen Suchfilter, um die Ergebnisse gemäß dem Suchbefehl anzuzeigen; deshalb ist ng-For nützlicher als 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">

Der vollständige HTML-Code ist unten angegeben.

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>

Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.