Filtern unserer To-Do-Elemente

Das Filtern von Elementen basiert auf der filter-Eigenschaft, die Sie zuvor zu app.component.ts hinzugefügt haben:

filter: 'all' | 'active' | 'done' = 'all';

Der Standardwert für filter ist all, kann aber auch active oder done sein.

Fügen Sie in app.component.html den folgenden HTML-Code unter dem Hinzufügen-Button, aber oberhalb des Abschnitts, der die Elemente auflistet, hinzu. Im folgenden Ausschnitt sind die bestehenden Abschnitte in Ihrem HTML in Kommentaren dargestellt, damit Sie genau sehen können, wo die Buttons platziert werden sollen.

<!-- <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>... -->

Durch Klicken auf die Buttons ändern sich die filter-Werte, die festlegen, welche items angezeigt werden, sowie die Stile, die Angular auf den aktiven Button anwendet.

• Wenn der Benutzer auf den Alle-Button klickt, werden alle Elemente angezeigt.
• Wenn der Benutzer auf den Zu erledigen-Button klickt, werden nur die Elemente mit einem done-Wert von false angezeigt.
• Wenn der Benutzer auf den Erledigt-Button klickt, werden nur die Elemente mit einem done-Wert von true angezeigt.

Eine Klassenattributbindung, die eckige Klammern [] verwendet, steuert die Textfarbe der Buttons. Die Klassenbindung [class.active] wendet die active-Klasse an, wenn der Wert von filter mit dem Ausdruck übereinstimmt. Zum Beispiel, wenn der Benutzer den Erledigt-Button klickt, welcher den filter-Wert auf done setzt, wird der Ausdruck der Klassenbindung filter == 'done' zu true ausgewertet. Wenn der filter-Wert done ist, wendet Angular die active-Klasse auf den Erledigt-Button an, um die Textfarbe grün zu machen. Sobald der Benutzer auf einen der anderen Buttons klickt, ist der Wert von filter nicht mehr done, sodass die grüne Textfarbe nicht mehr angewendet wird.

Das ging schnell! Da Sie bereits den filter-Code in app.component.ts hatten, mussten Sie nur die Vorlage bearbeiten, um Steuerungen für das Filtern der Elemente bereitzustellen. Unser nächster — und letzter — Artikel befasst sich mit dem Erstellen Ihrer Angular-App für die Produktion und bietet weitere Ressourcen, um Ihre Lernreise fortzusetzen.

• Zurück
• Übersicht: Verständnis von clientseitigen JavaScript-Frameworks
• Weiter