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);
}

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

 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"]，那么我是否希望它在框中选中“基数1”或“种族”都显示出来。

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

Here is the StackBlitz（为易于使用而简化）。上面提到了服务位置。 workouts-filter和workouts-list来自workouts-page文件夹中的两个独立组件。

Answer 1

您可以使用以下条件：

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

这是首先检查phases数组是否为空，如果不是，请检查workout.phase数组中是否存在任何元素。

使用复选框过滤嵌套数组

1 个答案: