过滤待办事项
现在让我们继续添加功能，允许用户过滤他们的待办事项，以便他们可以查看活动、已完成或所有事项。
| 先决条件 | 熟悉核心 HTML、CSS 和 JavaScript 语言，了解 终端/命令行。 |
|---|---|
| 目标 | 为我们的应用程序添加过滤功能。 |
我们的过滤代码
过滤项目基于之前添加到 app.component.ts 的 filter 属性
ts
filter: 'all' | 'active' | 'done' = 'all';
filter 的默认值为 all，但它也可以是 active 或 done。
添加过滤控件
在 app.component.html 中，将以下 HTML 添加到“添加”按钮下方，但在列出项目的节之前。在以下代码段中，您 HTML 中的现有部分被注释掉了，因此您可以确切地看到在哪里放置按钮。
html
<!-- <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>... -->
点击按钮会更改 filter 值，这将决定显示的 items 以及 Angular 应用于活动按钮的样式。
- 如果用户点击“全部”按钮，则会显示所有项目。
- 如果用户点击“待办事项”按钮，则仅显示
done值为false的项目。 - 如果用户点击“已完成”按钮，则仅显示
done值为true的项目。
使用方括号 [] 的类属性绑定控制按钮的文字颜色。类绑定 [class.active] 在 filter 值与表达式匹配时应用 active 类。例如，当用户点击“已完成”按钮时，它会将 filter 值设置为 done，则 filter == 'done' 的类绑定表达式将评估为 true。当 filter 值为 done 时，Angular 会将 active 类应用于“已完成”按钮以使文字颜色变为绿色。只要用户点击其他按钮之一，filter 的值就不再是 done，因此绿色文字颜色不再适用。