angular - Angular 反应式表单过滤器列表

Question

我有一个复选框列表和一个输入字段。每个复选框都有一个名称。

我想使用输入字段中的值按名称过滤列表。预期的结果是只有那些复选框是可见的，其名称包含在输入字段中键入的文本。

这在 AngularJS 中非常简单，使用 Angular 的模板驱动表单也很容易。

但我需要以反应形式进行。我到底该怎么做？

代码示例：https ://stackblitz.com/edit/angular-checkbox-list-filter

标签： angularforms

Answer 1

您可以将复选框列表设为 Observable，并在用户每次搜索时更改可观察对象的值。或者您可以存储两个副本。第一个将保存复选框的主列表，第二个将保存基于搜索词的过滤结果。

根据方法 2 进行了一些调整以帮助您入门。见此处

• 我调整了 HTML 以循环通过“filtered_data”变量。
• 此变量在表单控件值更改时得到更新。使用正则表达式“不区分大小写”模式来匹配每个框的名称
• 我还添加了逻辑，以便在清除输入字段时重置所有控件。

希望这足以让你开始。

如果您需要使其成为可观察的，请联系。