Javascript 如何基于grand child数组过滤数组'；s的价值观？

我正在尝试根据grand child数组的值筛选父数组，但我的筛选方法不太有效，UI也没有得到更新

这是我的过滤函数

filterIt（$event）{
this.filter.RegCategoryName=$event.target.value；
this.dataObject=staticData.filter（值=>
value.List.filter（ch=>ch.RegistrationCategory.filter（gChild=>
Object.keys（this.filter）.every（ob=>
字符串（gChild[ob]）.toLowerCase（）.includes（字符串（this.filter[ob]）.toLowerCase（））
)
)).长度
)
}

期望值：

---

当用户键入

新课程

时，它应该只在“课程”列中显示

DP课程

。

您可以使用和

数组

方法的组合来实现这一点。使用扩展操作符

…

，使原始数组不会在子对象中更新

filterIt（$event）{
this.filter.RegCategoryName=$event.target.value；
this.dataObject=staticData.filter（值=>{
常量数据={…值}；
data.List=data.List.map（ch=>{
常量列表={…ch}；
list.RegistrationCategory=list.RegistrationCategory.filter（gChild=>{
返回gChild.RegCategoryName.toLowerCase（）.indexOf（this.filter.RegCategoryName.toLowerCase（））！=-1
});
退货清单；
});
返回data.List.some（List=>！！List.RegistrationCategory.length）；
});
}

注意：避免使用首字母大写的变量名

下面是一个关于的工作示例

说明：

这里使用的结构非常复杂，所以我想我将从内到外开始。让我们从最里面的

过滤器开始

list.RegistrationCategory=list.RegistrationCategory.filter（gChild=>{
返回gChild.RegCategoryName.toLowerCase（）.indexOf（this.filter.RegCategoryName.toLowerCase（））！=-1
});

filter（）方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素

这个应该足够清楚。此处使用的条件与Angle Material的
mat table
过滤器中使用的条件相同。如果
RegCategoryName
包含搜索词，则会进行筛选。我之所以说包含，是因为它将匹配
新课程
，即使您的搜索词是
ew
。如果这不是您想要的，您可以使用
startsWith
。仅当您的搜索词是
new
而不是
ew
时，此项才匹配

list.RegistrationCategory=list.RegistrationCategory.filter（gChild=>{
返回gChild.RegCategoryName.toLowerCase（）.startsWith（this.filter.RegCategoryName.toLowerCase（））
});

转到第一个父数组
列表
。我们不想在这里过滤或更改对象。相反，我们只需要相同的对象，但要使用新的过滤的
注册类别
。这非常适合
映射
，因为
映射
返回具有相同数量对象的数组（如果需要，对对象中的元素进行一些修改）

map（）方法创建一个新数组，其结果是对调用数组中的每个元素调用提供的函数

因此，在我们的
map
中，我们将使用上面创建的
过滤器更新
RegistrationCategory
。我们不能直接修改
ch
，因为这会改变原始对象。因此，我们将使用浅克隆
ch
到变量
列表
，使用上述
过滤器
修改新
列表
中的
注册类别
，并返回对象。现在，我们只需更新每个对象中的
RegistrationCategory
，即可获得
列表
数组

现在，对于最后一部分，我们需要通过
staticData
过滤
。正如我们在
映射中所做的那样，我们将在这里再次使用扩展语法，因为我们不想更新原始对象
data.List
现在将通过最内层的过滤器对每个
RegistrationCategory
进行过滤，因此我们只需要根据
List
数组是否有
RegistrationCategory
长度大于0的对象返回
true
/
false
值。为此，我们可以使用
一些

some（）方法测试数组中是否至少有一个元素通过了所提供函数实现的测试。它返回一个布尔值

因此，如果
列表
数组中的任何
注册类别
的长度超过0（因为这就是我们所关心的，在我们最内层的过滤器过滤
列表
之后，是否还有任何
注册类别
），它将返回
true
，并添加到过滤后的
数据对象

这样我们就可以得到
staticData
中的每个对象，其
List
数组包含一个对象，其中
RegistrationCategory
有一些数据

我希望这能清楚地说明为什么您的代码有问题，为什么不能对所有三个阵列使用筛选器。
我抛出了一个错误，您能在演示中更新吗？-谢谢你的建议，我已经把它添加到我的回答中了。你真是个天才。但我不知道如何正确地混合所有这些贴图、过滤器和一些。我可以把它放在哪里？背后的逻辑是什么？澄清一下，为什么我的功能不起作用？阻滞剂是什么？你能帮我理解吗？你也可以详细说明你的步骤和你坚持的理由吗只是想从体育课上学习和帮助别人