javascript / intermediate
Snippet
Filtern von Objekt-Arrays mit einer reinen Array-Pipe
Benutzerdefinierte reine Pipes optimieren Array-Transformationen in Templates durch Zwischenspeicherung der Ergebnisse und führen transform nur aus, wenn sich die Eingabereferenz oder primitive Argumente ändern. Dies gewährleistet eine vorhersagbare, unveränderliche Filterung von Sammlungen ohne unnötige Neuberechnungen während Change-Detection-Zyklen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Pipe, PipeTransform } from '@angular/core';export interface Item {id: number;name: string;category: string;}@Pipe({name: 'filterByCategory',standalone: true,pure: true})export class FilterByCategoryPipe implements PipeTransform {transform(items: Item[] | null | undefined, category: string): Item[] {if (!items || !category) {return items ?? [];}return items.filter(item => item.category.toLowerCase() === category.toLowerCase());}}
angular
Erklärung
1
pure: true
Deklariert die Pipe als rein (pure), sodass transform nur ausgeführt wird, wenn sich die Referenz des Eingabe-Arrays oder der Kategorie-String ändert.
2
transform(items: Item[] | null | undefined, category: string): Item[] {
Definiert die Transformationssignatur mit typisierten Array-Eingaben und Schutz vor Nullwerten.
3
return items.filter(item => item.category.toLowerCase() === category.toLowerCase());
Führt eine unveränderliche Array-Filteroperation durch, die Elemente ohne Berücksichtigung der Groß-/Kleinschreibung nach Kategorie abgleicht.