Filtern unserer To-Do-Elemente
Kommen wir nun dazu, Funktionalität hinzuzufügen, damit Benutzer ihre To-Do-Elemente filtern können, sodass sie aktive, abgeschlossene oder alle Elemente anzeigen können.
Voraussetzungen: | Vertrautheit mit den Kernsprachen HTML, CSS und JavaScript, sowie Kenntnisse der Terminal-/Befehlszeile. |
---|---|
Ziel: | Filterfunktionalität zu unserer App hinzufügen. |
Unser Filtercode
Das Filtern von Elementen basiert auf der filter
-Eigenschaft, die Sie zuvor zu app.component.ts
hinzugefügt haben:
export class AppComponent {
// …
filter: "all" | "active" | "done" = "all";
// …
}
Der Standardwert für den Filter ist all
, er kann aber auch active
oder done
sein.
Hinzufügen von Filtersteuerungen
Fügen Sie in app.component.html
den folgenden HTML-Code unterhalb der Add-Schaltfläche, aber oberhalb des Abschnitts, der die Elemente auflistet, hinzu. Im folgenden Ausschnitt sind die vorhandenen Abschnitte in Ihrem HTML auskommentiert, damit Sie genau sehen können, wo Sie die Schaltflächen platzieren müssen.
<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
-->
<!-- Buttons that show all, still to do, or done items on click -->
<div class="btn-wrapper">
<button
class="btn btn-menu"
[class.active]="filter === 'all'"
(click)="filter = 'all'">
All
</button>
<button
class="btn btn-menu"
[class.active]="filter === 'active'"
(click)="filter = 'active'">
To Do
</button>
<button
class="btn btn-menu"
[class.active]="filter === 'done'"
(click)="filter = 'done'">
Done
</button>
</div>
<!-- <h2>{{items.length}} item(s)</h2>
<ul>... -->
Das Klicken auf die Schaltflächen ändert die filter
-Werte, die bestimmen, welche items
angezeigt werden und welche Stile Angular auf die aktive Schaltfläche anwendet.
- Wenn der Benutzer die All-Schaltfläche klickt, werden alle Elemente angezeigt.
- Wenn der Benutzer die To do-Schaltfläche klickt, werden nur die Elemente mit einem
done
-Wert vonfalse
angezeigt. - Wenn der Benutzer die Done-Schaltfläche klickt, werden nur die Elemente mit einem
done
-Wert vontrue
angezeigt.
Eine Klassenattributbindung mit Hilfe von eckigen Klammern, []
, steuert die Textfarbe der Schaltflächen. Die Klassenbindung [class.active]
wendet die active
-Klasse an, wenn der Wert von filter
dem Ausdruck entspricht. Zum Beispiel, wenn der Benutzer auf die Done-Schaltfläche klickt, die den filter
-Wert auf done
setzt, bewertet der Ausdruck der Klassenbindung filter === 'done'
zu true
. Wenn der filter
-Wert done
ist, wendet Angular die active
-Klasse auf die Done-Schaltfläche an, um die Textfarbe grün zu machen. Sobald der Benutzer auf eine der anderen Schaltflächen klickt, ist der filter
-Wert nicht länger done
, sodass die grüne Textfarbe nicht mehr gilt.
Zusammenfassung
Das ging schnell! Da Sie den filter
-Code bereits in app.component.ts
hatten, mussten Sie nur die Vorlage bearbeiten, um Steuerungen zum Filtern der Elemente bereitzustellen. Unser nächster und letzter Artikel befasst sich damit, wie Sie Ihre Angular-App für die Produktion bereitstellen und bietet weitere Ressourcen, um Ihre Lernreise fortzusetzen.