Angular反应形式过滤器复选框列表

Question

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

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

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

但是我需要以反应形式进行。 在地球上我该怎么做？

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

Answer 1

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

进行一些调整，以使您开始使用方法2。seen here

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

希望这足以让您入门。

如果您需要对此进行观察，请伸出手。

Answer 2

在表单数组中再创建一个名称表单控件。有了它，您将知道是否按名称选中了哪个框

找到此链接 [https://stackblitz.com/edit/angular-checkbox-list-filter-sqgg59?file=src%2Fapp%2Fmy-form%2Fmy-form.component.ts][1]