javascript / intermediate
Snippet
Iterieren von Sammlungen mit Leerzustandsbehandlung mittels Template-For-Blöcken
Der integrierte @for-Kontrollflussblock bietet eine deklarative Möglichkeit, über iterierbare Datenstrukturen zu iterieren und dabei die Elementidentität nachzuverfolgen. Der optionale @empty-Block rendert automatisch Fallback-Markup, wenn die Sammlung keine Elemente enthält.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component } from '@angular/core';@Component({selector: 'app-user-list',standalone: true,template: `<ul>@for (user of users; track user.id; let idx = $index, total = $count) {<li>{{ idx + 1 }} / {{ total }}: {{ user.name }}</li>} @empty {<li class="empty-message">No active users found in the system.</li>}</ul>`})export class UserListComponent {users = [{ id: 101, name: 'Alice' }, { id: 102, name: 'Bob' }];}
angular
Erklärung
1
@for (user of users; track user.id; let idx = $index, total = $count) {
Iteriert über das users-Array, verfolgt Elemente anhand ihrer eindeutigen ID und stellt Index- sowie Gesamtzahl-Variablen bereit.
2
<li>{{ idx + 1 }} / {{ total }}: {{ user.name }}</li>
Interpoliert den 1-basierten Index, die Gesamtzahl der Elemente und den Namen in Listenelemente.
3
} @empty {
Definiert einen alternativen Vorlagenabschnitt, der ausgelöst wird, wenn das zugrundeliegende Iterable leer ist.
4
<li class="empty-message">No active users found in the system.</li>
Zeigt eine benutzerfreundliche Platzhalternachricht an, wenn keine Einträge vorhanden sind.