Filtern nach Objekteigenschaft in Angular
- Filtern Sie nach einer beliebigen Objekteigenschaft in Angular
- Filtern Sie nach bestimmten Objekteigenschaften in Angular
- Filtern nach Objekteigenschaft mit Pipe in Angular
Die Filterfunktion auf Webseiten ermöglicht es Benutzern, ihre Suche schnell einzugrenzen, z. B. in Fällen, in denen Sie beurteilen möchten, ob sich ein Element in einer langen Liste von Elementen befindet. Außerdem können wir die Filterfunktion verwenden, wenn wir eine Liste herausfiltern möchten, z. B. eine Liste mit Autos.
Um ein Objekt nach seinen Eigenschaften zu filtern, können Sie die Liste nach Zeichenfolgen, Zahlen usw. filtern. In diesem Artikel werden wir uns nun verschiedene Möglichkeiten ansehen, Filter innerhalb einer Webseite durchzuführen.
Filtern Sie nach einer beliebigen Objekteigenschaft in Angular
In diesem Beispiel möchten wir eine Web-App erstellen, die es uns ermöglicht, nach beliebigen Kriterien zu filtern, z. B. Zeichenfolgen und Zahlen. Wir erstellen also einen neuen Projektordner und navigieren dann zur Datei index.html, um die Codes zu schreiben.
Code-Snippet – index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Filter</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}]"></div>
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
<hr>
</table>
</body>
</html>
Es organisiert das Array von Objekten in einer Tabelle, und dann erhalten wir auch eine Eingabeleiste, mit der wir die Objekte filtern. Wir müssen dann eine neue Datei erstellen und sie filter.js nennen; Hier fügen wir Funktionen für die App hinzu.
Codeschnipsel – filter.js:
var expectFriendNames = function(expectedNames, key) {
element.all(by.repeater(key + ' in friends').column(key + '.name')).then(function(arr) {
arr.forEach(function(wd, i) {
expect(wd.getText()).toMatch(expectedNames[i]);
});
});
};
it('should search across all fields when filtering with a string', function() {
var searchText = element(by.model('searchText'));
searchText.clear();
searchText.sendKeys('m');
expectFriendNames(['Mary', 'Mike', 'Adam'], 'friend');
searchText.clear();
searchText.sendKeys('76');
expectFriendNames(['John', 'Julie'], 'friend');
});
Also haben wir eine Funktion für die Sucheingabe erstellt und dann das Modell innerhalb einer searchText-Variablen aufgerufen. Siehe die Ausgabe unten:
Filtern Sie nach bestimmten Objekteigenschaften in Angular
Dieses Mal wollen wir eine App erstellen, in der wir nach einer bestimmten Eigenschaft filtern können, wo wir nach String filtern sollen, funktioniert nur String, wo wir nach Zahl filtern sollen, funktioniert nur Zahl, dann werden wir auch einen Suchfilter haben von überall können wir sowohl nach Zeichenkette als auch nach Zahl suchen.
Wir werden ein neues Angularprojekt erstellen und in die Datei index.html navigieren, um Codes hinzuzufügen, die die Struktur der Seite erstellen. Es enthält eine Suchleiste für alle, nur nach Nummer und nur nach Zeichenfolgen.
Code-Snippet – index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-filter-filter-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'555-2578'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}]">
</div>
<hr>
<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></label><br>
<table id="searchObjResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friendObj in friends | filter:search:strict">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
</table>
</body>
</html>
An dieser Stelle sollten wir die Webseite mit der oben definierten Struktur sehen. Jetzt geht es darum, Funktionalität für die App zu entwerfen.
Wir erstellen eine neue Datei, nennen sie filter.js und geben dann diese Codes ein:
Codeschnipsel – filter.js:
var expectFriendNames = function(expectedNames, key) {
it('should search in specific fields when filtering with a predicate object', function() {
var searchAny = element(by.model('search.$'));
searchAny.clear();
searchAny.sendKeys('i');
expectFriendNames(['Mary', 'Mike', 'Julie', 'Juliette'], 'friendObj');
});
it('should use a equal comparison when comparator is true', function() {
var searchName = element(by.model('search.name'));
var strict = element(by.model('strict'));
searchName.clear();
searchName.sendKeys('Julie');
strict.click();
expectFriendNames(['Julie'], 'friendObj');
});
Mit der Variable searchAny geben wir an, dass Benutzer entweder nach Zeichenfolgen oder nach Zahlen filtern können.
Nachdem wir die Variable searchName deklariert haben, haben wir auch eine strict-Variable deklariert, sodass keine Daten dort angezeigt werden, wo wir mit Strings im Eingabefeld nach Zahl filtern. Dasselbe passiert, wenn wir versuchen, mit der Zahl im Eingabefeld nach Strings zu filtern.
Siehe die Ausgabe unten:
Filtern nach Objekteigenschaft mit Pipe in Angular
Die Pipe ist ideal zum Ausführen von zwei Befehlen oder Prozessen, was ideal für das ist, was wir hier tun. Zum Beispiel möchten wir filtern, was ein Prozess ist, und die Ergebnisse des Filters, des zweiten Prozesses, zurückgeben.
Wir möchten also ein neues Angularprojekt erstellen und dann eine neue Datei erstellen, die Details zu den Elementen enthält, die wir filtern möchten. Benennen Sie die Datei cars.ts und geben Sie diese Codes ein:
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
}
];
Als nächstes wollen wir eine Dateistruktur erstellen, die die Daten in cars.ts in einer Tabelle organisiert, einschließlich des Eingabefelds für den Filter. Wir werden die Codes dafür in die Datei app.component.html eingeben:
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>
Nun wollen wir an der Funktionalität der App arbeiten; Wir erstellen eine neue Datei, nennen sie filter.pipe.ts und fügen 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());
});
});
}
}
Wir haben Pipe und PipeTransform aus dem Angularkern importiert, sodass beim Filtern der Elemente die Daten transformiert und die gefilterten Ergebnisse zurückgegeben werden. Als nächstes müssen wir auf die Datei app.component.ts zugreifen, um ein wenig Code für zusätzliche Funktionen hinzuzufügen.
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 = 'filthree';
cars: Car[] = CARS;
searchText: string;
}
Den Datentyp für die Items haben wir im Array von cars.ts deklariert. Schließlich müssen wir die erforderlichen Module in die Datei app.module.ts importieren.
Code-Snippet – app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FilterPipe } from './filter.pipe';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, FilterPipe ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Wir sehen die folgende Ausgabe, sobald wir mit allen Schritten fertig sind:
Das Sortieren von Elementen mit dem Angularfilter ist also eine Funktion, die Benutzern auf Ihrer Website Komfort bietet, da sie es förderlich macht, schnell nach den gewünschten Dingen zu suchen.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn