javascript / intermediate
Snippet
Aufteilen und Segmentieren von Datensatz-Arrays mittels reiner Transformations-Pipes
Benutzerdefinierte Angular-Pipes mit PipeTransform eignen sich hervorragend für unveränderliche Array-Transformationen direkt in Templates. Durch Validierung des Arrays, Normalisierung der Grenzwerte und Anwendung von Array.prototype.slice liefert diese Pipe paginierte Abschnitte, ohne das Quell-Array zu verändern, und nutzt dabei das Caching reiner Pipes.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'paginate',standalone: true,pure: true})export class PaginatePipe implements PipeTransform {public transform<T>(collection: readonly T[] | null | undefined,pageIndex: number,pageSize: number): T[] {if (!Array.isArray(collection) || collection.length === 0) {return [];}const sanitizedPageSize = Math.max(1, Math.floor(pageSize));const sanitizedPageIndex = Math.max(0, Math.floor(pageIndex));const startIndex = sanitizedPageIndex * sanitizedPageSize;if (startIndex >= collection.length) {return [];}return collection.slice(startIndex, startIndex + sanitizedPageSize);}}
angular
Erklärung
1
public transform<T>(collection: readonly T[] | null | undefined, pageIndex: number, pageSize: number): T[] {
Definiert eine generische Transformationsmethode, die ein schreibgeschütztes Array, den Seitenindex und die Seitengröße entgegennimmt.
2
if (!Array.isArray(collection) || collection.length === 0) {
Führt defensive Prüfungen gegen null, undefined oder leere Eingaben durch, um Laufzeitfehler zu verhindern.
3
const sanitizedPageSize = Math.max(1, Math.floor(pageSize));
Normalisiert die Seitengröße, um eine Ganzzahl von mindestens 1 sicherzustellen.
4
return collection.slice(startIndex, startIndex + sanitizedPageSize);
Extrahiert die gewünschte Teilmenge von Elementen über eine unveränderliche Array-Segmentierung.