Filtern unserer To-Do-Elemente

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, aber er kann auch active oder done sein.

Fügen Sie in app.component.html den folgenden HTML-Code unterhalb des Hinzufügen-Buttons, aber oberhalb des Abschnitts, der die Elemente auflistet, hinzu. Im folgenden Codeausschnitt sind die bestehenden Abschnitte in Ihrem HTML als Kommentare enthalten, damit Sie genau sehen, wo Sie die Schaltflächen platzieren.

<!-- <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 die angezeigten items bestimmen sowie die von Angular auf die aktive Schaltfläche angewendeten Stile.

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

Eine Klassenattributbindung mit eckigen Klammern, [], steuert die Textfarbe der Schaltflächen. Die Klassenbindung, [class.active], wendet die active-Klasse an, wenn der Wert von filter mit dem Ausdruck übereinstimmt. Zum Beispiel, wenn der Benutzer auf die Erledigt-Schaltfläche klickt, wodurch der filter-Wert auf done gesetzt wird, wird der Ausdruck der Klassenbindung filter == 'done' zu true ausgewertet. Wenn der filter-Wert done ist, wendet Angular die active-Klasse auf die Erledigt-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 mehr done, sodass die grüne Textfarbe nicht mehr gilt.

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 produktionsbereit machen, und bietet weitere Ressourcen, um Ihre Lernreise fortzusetzen.

• Zurück
• Übersicht: JavaScript-Frameworks und -Bibliotheken
• Weiter