javascript - 使用复选框过滤嵌套数组

Question

我正在开发一个项目，其中有一个锻炼列表以及一个过滤器，用于根据标记的复选框查看特定的锻炼选择。到目前为止，由于解决了一项技术，一切都运行良好here 。此技术非常适合过滤单个项目，但是，当我将项目嵌套在数组中时，它不再起作用。

目前，我有一个包含以下内容的锻炼模型:

title,
description,
imagePath,
type: string,
duration,
specialty,
phase,
zwo

我有使用 Angular SelectionModel 的复选框。这些复选框会过滤以下内容:使用上面链接中提供的过滤方法的phase、specialty和type(这按预期工作):

filterWorkouts(phases: string[], specialties: string[], types: string[]) {
  const workouts = this.workouts.filter(workout => {
    return (
      (phases.length === 0 || phases.indexOf(workout.phase) >= 0) &&
      (specialties.length === 0 || specialties.indexOf(workout.specialty) >= 0) &&
      (types.length === 0 || types.indexOf(workout.type) >= 0)
    );
  });
  this.selectedWorkouts.next(workouts);
}

我认为在某些情况下我可能需要多个阶段。为此，我在服务中创建了一个嵌套数组(在 StackBlitz 中可以在 features/workouts-page/workoutservice/workout.service 中找到)。此嵌套数组从锻炼模型中获取相同的项目，但阶段是嵌套数组:

 workouts: Workout[] = [
    new Workout(
      'title',
      `description...`,
      "..img",
      "type",
      duration,
      "specialty...",
      ["Base 1", "Testing"],
      true/false
    ),

请注意["Base 1", "Testing"]，因为这现在是一个嵌套数组。

问题是，当我进行此更改时，过滤方法会中断。复选框过滤器工作的唯一方式是未选择任何阶段。如果我从上面转到 filterWorkouts() ，并在 return 中更改行:

... (phases.length === 0 || Phases.indexOf(workout.phase) >= 0) && ...

至:... (phases.length === 0 || Phases.indexOf(workout.phase[0]) >= 0) && ...

它再次起作用，但当然只查找索引为 0 的数组。

我尝试循环遍历数组并根据过滤器检查索引，但这每次都会破坏我的应用程序。

是否有一种方法可以根据数组中的每一项而不是仅一项来过滤我的复选框？因此，如果锻炼的阶段有[“Base 1”，“Race”]，我希望它显示是否在框中选中了Base 1或Race。

任何帮助将不胜感激。我也很乐意澄清任何事情。

Here is the StackBlitz (为了便于使用而进行了简化)。服务地点如上所述。 workouts-filter 和 workouts-list 来自 workouts-page 文件夹中的两个独立组件。

Answer 1

您可以使用这样的条件:

!phases.length || phases.some(phase => workout.phase.includes(phase))

它的作用是首先检查phases数组是否为空，如果不为空，则检查workout.phase数组中是否存在其任何元素.