javascript / intermediate
Snippet
Template-Iterationsverfolgung bei dynamischen Kollektionen
Der integrierte Angular-Control-Flow `@for` optimiert die DOM-Wiederverwendung bei Array-Kollektionen. Durch die Angabe des `track`-Ausdrucks wird ein erneutes Rendern unveränderter DOM-Knoten beim Ändern oder Sortieren vermieden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
@if (userRoles().length > 0) {<ul class="role-list">@for (role of userRoles(); track role.id; let idx = $index, isFirst = $first) {<li [class.primary-badge]="isFirst"><span>#{{ idx + 1 }}: {{ role.name }}</span><button (click)="removeRoleAtIndex(idx)">Remove</button></li>} @empty {<li class="empty-notice">No active roles assigned.</li>}</ul>}
angular
Erklärung
1
@for (role of userRoles(); track role.id; let idx = $index, isFirst = $first) {
Iteriert über das Array-Signal, verfolgt Identitäten per eindeutiger ID und bindet Kontextvariablen.
2
<li [class.primary-badge]="isFirst">
Bindet eine CSS-Klasse dynamisch anhand der booleschen Schleifenvariable für das erste Element.
3
} @empty {
Rendert automatisch ein Fallback-Template, wenn das Quell-Array keine Elemente enthält.