使用复选框过滤嵌套数组

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的数组。

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

是否可以针对数组中的每一项而不是仅一项来过滤我的复选框？因此，如果锻炼的phase 具有["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数组中是否存在任何元素。