Gruppieren von Daten mit einem Angularfilter

1. Gruppieren Sie Daten in Angular mit der filter-Funktion
2. Gruppieren Sie Daten in Angular mit reinem HTML
3. Gruppendaten in Angular mit ngFor
4. Abschluss

Webseiten werden aus mehreren Gründen verwendet. Wir haben Websites, die entwickelt wurden, um Probleme zu lösen; Einige sind für Bildungszwecke konzipiert.

In solchen Fällen müssen diese Websites möglicherweise Elemente in klassifizierten Präsentationen anzeigen. In Klassen vorhandene Elemente werden benötigt, um zu zeigen, wo jedes Element hingehört, wie z. B. das Präsentieren von Daten in der Klasse der Länder, Bundesstaaten, Bezirke usw.

Wir werden uns verschiedene Möglichkeiten zum Gruppieren von Elementen mit dem Angular-Framework ansehen.

Gruppieren Sie Daten in Angular mit der filter-Funktion

Diese erste Methode zeigt die Daten in Gruppen an und verfügt über eine Suchmaschine mit Filterfunktion.

Wir beginnen damit, einen neuen Projektordner zu erstellen, und dann müssen wir zwei weitere Dateien im Ordner src>>app des Projektordners erstellen.

Die erste Datei heißt cars.ts; Dies enthält die Daten, die wir in Form eines Arrays gruppieren möchten. Die zweite Datei heißt filter.pipe.ts; Hier erstellen wir die Pipe-Funktion für den Suchfilter.

Wir navigieren nun zur Datei app.component.html des Projektordners und geben diese Codes ein.

Code-Snippet – app.component.html:

<div class="container">
  <h2 class="py-4">Cars</h2>
  <div class="form-group mb-4">
    <input class="form-control" type="text" [(ngModel)]="searchText" placeholder="Search">
  </div>
  <table class="table" *ngIf="(cars | filter: searchText).length > 0; else noResults">
    <colgroup>
      <col width="5%">
      <col width="*">
      <col width="35%">
      <col width="15%">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Brand</th>
        <th scope="col">Model</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let car of cars | filter: searchText; let i = index">
        <th scope="row">{{i + 1}}</th>
        <td>{{car.brand}}</td>
        <td>{{car.model}}</td>
        <td>{{car.year}}</td>
      </tr>
    </tbody>
  </table>
  <ng-template #noResults>
    <p>No results found for "{{searchText}}".</p>
  </ng-template>
</div>

Hier haben wir die Struktur für die Seite und das Gruppierungsformat für unsere Daten erstellt und dann die Funktion *ngFor zu den Überschriften deklariert, um den Suchfilter zu aktivieren.

Als nächstes gehen wir zur Datei app.component.ts, um diese wenigen Codes einzugeben.

Code-Snippet – app.component.ts:

import { Component } from '@angular/core';
import { CARS } from './cars';
interface Car {
  brand: string;
  model: string;
  year: number;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'filterone';
  cars: Car[] = CARS;
  searchText: string;
}

Alles, was wir hier getan haben, ist, die Daten zu deklarieren, die wir gruppieren möchten. Für brand, model und die Art der Eingabe innerhalb des Suchfelds haben wir sie als String-Typen deklariert, während wir die Typennummer für das year des Automodells deklariert haben.

Jetzt müssen wir zu der Datei car.ts wechseln, die wir zuvor erstellt haben, um die Daten einzufügen, die wir gruppieren möchten. Wir werden diese Codes eingeben.

Codeschnipsel- cars.ts:

export const CARS = [
    {
      brand: 'Audi',
      model: 'A4',
      year: 2018
    }, {
      brand: 'Audi',
      model: 'A5 Sportback',
      year: 2021
    }, {
      brand: 'BMW',
      model: '3 Series',
      year: 2015
    }, {
      brand: 'BMW',
      model: '4 Series',
      year: 2017
    }, {
      brand: 'Mercedes-Benz',
      model: 'C Klasse',
      year: 2016
    }
  ];

Hier haben wir die Daten eingegeben, die wir in Form eines Arrays gruppieren möchten, und jeder hat den Datentyp, den wir in der Datei app.component.ts deklariert haben.

Als nächstes navigieren wir durch die Datei filter.pipe.ts und geben diese Codes ein.

Codeschnipsel- filter.pipe.ts:

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    return items.filter(item => {
      return Object.keys(item).some(key => {
        return String(item[key]).toLowerCase().includes(searchText.toLowerCase());
      });
    });
   }
}

Was die pipe-Funktion tut, ist, dass sie die Änderung in den gruppierten Daten erkennt und den neuen Wert zurückgibt, nachdem die Änderung aufgetreten ist.

Also deklarieren wir die Elemente, die in der Funktion transform() geändert werden könnten, und verwenden dann die Anweisung if, um Angular mitzuteilen, dass sobald eine Änderung in den deklarierten Elementen auftritt, die gefilterten Elemente zurückgegeben werden. Wenn wir ein Element in die Suchleiste eingeben, sehen wir, dass die Seite Elemente zurückgibt, die sich auf die von uns eingegebenen Wörter beziehen.

Schließlich werden wir einige Arbeiten in der Datei app.module.ts erledigen.

Code-Snippet – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FilterPipe } from './filter.pipe';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Hier importieren wir die Module, mit denen unsere Anwendung funktioniert. Außerdem haben wir die Komponente Filterpipe aus filter.pipe.ts deklariert.

Ausgang:

Gruppieren Sie Daten in Angular mit reinem HTML

Wenn Sie sich die Struktur gruppierter Daten ansehen, können wir sie einfach mit reinem HTML codieren, was wir in diesem Beispiel tun werden.

In der Datei app.component.html werden wir die gesamte Codierung vornehmen.

Code-Snippet – app.component.html:

<ol class="list-group list-group-light list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold"><h4>Fruits</h4></div>
      <ol>Pineapple</ol>
      <ol>apple</ol>
      <ol>Pine</ol>
    </div>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold"><h4>Cars</h4></div>
      <ol>BMW</ol>
      <ol>Benz</ol>
      <ol>Audi</ol>
    </div>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold"><h4>Countries</h4></div>
      <ol>US</ol>
      <ol>Italy</ol>
      <ol>France</ol>
    </div>
  </li>
</ol>

Wir haben die Überschriften jeder Gruppe innerhalb eines h4-Tags deklariert, damit sie größer erscheinen als die Elemente, die wir klassifizieren. Dann deklarierten wir jeden Artikel in einem geordneten Listen-Tag.

Ausgang:

Gruppendaten in Angular mit ngFor

Die ngFor-Direktive ist die eingebaute Funktion von Angular, mit der wir lokale Daten nutzen können, die in Form eines Arrays präsentiert werden. Es organisiert die anzuzeigenden Daten in Form von gruppierten Daten.

Wir erstellen einen neuen Projektordner, navigieren zur Datei app.component.ts und geben diese Codes ein.

Code-Snippet – app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'filterone';
  listofStatesCity : any[]=
  [
    {'State' : 'Karnataka', 'City':[{'Name': 'Bengaluru'}, {'Name': 'Mangaluru'}]},
    {'State' : 'Tamil Nadu', 'City':[{'Name': 'Chennai'}, {'Name': 'Vellore'}]},
    {'State' : 'Jharkhand', 'City':[{'Name': 'Ranchi'}, {'Name': 'Bokaro'}]}
  ]
}

Wir gruppieren die Daten in zwei Klassen, State und City. Wir haben die Namen der Staaten und Städte unter jeder Gruppe deklariert.

Dann navigieren wir zur app.component.html, um die Struktur für die Array-Daten zu erstellen.

Code-Snippet – app.component.html:

<ul *ngFor = "let state of listofStatesCity">
  <li>{{state.State}}</li>
  <ul *ngFor = "let city of state.City">
      <li>
        {{city.Name}}
      </li>
  </ul>

Wir haben die Direktive ngFor für jede Gruppe deklariert, sodass die Daten bei der Darstellung auf der Webseite unter State und City klassifiziert werden.

Ausgang:

Abschluss

Wir können Daten mit verschiedenen Methoden innerhalb des Angular-Frameworks gruppieren. Die Gründe für die Gruppierung von Daten könnten unseren Ansatz bestimmen, insbesondere bei der pipe-Funktion, mit der wir Suchfilteroptionen erstellen können.