javascript / intermediate
Snippet
Array-Filterung und -Projektion über reine Transformations-Pipes
Benutzerdefinierte Angular-Pipes ermöglichen effiziente Datentransformationen für Arrays durch Kombination von Methoden wie filter und map. Die Deklaration als 'pure: true' garantiert, dass die Transformation nur neu berechnet wird, wenn sich die Array-Referenz oder die Parameter ändern, was unnötige Zyklen im Change-Detection-Prozess vermeidet.
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';interface UserRecord {id: number;name: string;isActive: boolean;department: string;}@Pipe({ name: 'activeDepartmentFilter', pure: true, standalone: true })export class ActiveDepartmentFilterPipe implements PipeTransform {transform(users: readonly UserRecord[] | null, targetDept: string): string[] {if (!users || !Array.isArray(users)) {return [];}return users.filter((user): user is UserRecord => user.isActive && user.department === targetDept).map(user => user.name);}}
angular
Erklärung
1
@Pipe({ name: 'activeDepartmentFilter', pure: true, standalone: true })
Registriert eine reine Standalone-Pipe, die Ergebnisse zwischenspeichert, bis sich Eingabereferenzen ändern.
2
transform(users: readonly UserRecord[] | null, targetDept: string): string[] {
Nimmt ein unveränderliches Array von Benutzerobjekten entgegen und liefert ein projiziertes String-Array zurück.
3
if (!users || !Array.isArray(users)) { return []; }
Führt defensive Prüfungen gegen null, undefined oder fehlerhafte Datentypen durch.
4
.filter((user): user is UserRecord => user.isActive && user.department === targetDept)
Verwendet einen benutzerdefinierten TypeScript Type Guard im Filteraufruf zur präzisen Datenselektion.