RxJS教程：使用forkJoin高效整合与操作多数据流

// 定义数据接口
export interface Task {
  goal_id: string;
  name: string;
  description: string;
  priority: string;
  taskDate: string;
  id: string;
}

export interface Goal {
  name: string;
  isMainGoal: boolean;
  details: string;
  category: string;
  lifeArea: string;
  creationDate: string;
  priority: string;
  endDate: Date;
  id: string;
}

class MyService {
    // 假设 tasksS 和 goalsS 是用于获取数据集合的服务
    // tasksS.tasksCollection() 和 goalsS.goalsCollection() 返回 Observable<Task[]> 和 Observable<Goal[]>

    getTasksByCategory(category:string):Observable<any> {
        const daysFromThisWeek = this.getDaysFromThisWeek();
        return forkJoin({
          tasks: this.tasksS.tasksCollection(),
          goals: this.goalsS.goalsCollection(),
        })
        .pipe(
          // 步骤1: 筛选目标并获取ID
          map(({ tasks, goals }) => { // 接收到 tasks 和 goals
            return goals.filter((item:any) => item.category === category);
          }),
          map((goals:any) => { // 此时只接收到上一步返回的过滤后的 goals 数组，tasks 数据已丢失
            const goalsIDs = goals.map((item:any) => item.id);
            return goalsIDs; // 返回 goalsIDs
          })
        )
        .pipe( // 另一个 pipe，但它仍然是在前一个 pipe 的输出上操作
          // 步骤2: 根据 goalsIDs 筛选任务
          map(({ tasks, goalsIDs }) => { // 错误！这里的输入只有 goalsIDs，tasks 已经丢失
            let modArr = [] as any;
            goalsIDs.forEach((goalId:any) => {
              const forModArr = tasks.filter((task:any) => task.goal_id === goalId);
              modArr = modArr.concat(forModArr);
          })
          return modArr;
        }),
        map(tasksArr => {
          // 步骤3: 统计任务
          let finalTasks = [] as any;
          daysFromThisWeek.forEach((day:any) => {
              const forFinalTasks = tasksArr.filter((task:any) => task.taskDate === day);
              finalTasks = finalTasks.concat(forFinalTasks.length);
          })
          return finalTasks;
        })
        )
    }

    // 辅助函数，用于获取本周的日期列表
    getDaysFromThisWeek() {
        // ... dayjs 逻辑 ...
        let daysArr = [];
        for(let i=1; i<=7; i++) {
          daysArr.push(dayjs().startOf('week').add(i, "day").format('YYYY-MM-DD'));
        }
        return daysArr;
    }
}

import { Observable, forkJoin } from 'rxjs';
import { map, filter } from 'rxjs/operators';
import * as dayjs from 'dayjs'; // 假设 dayjs 已安装并导入

// 定义数据接口 (与之前相同)
export interface Task {
  goal_id: string;
  name: string;
  description: string;
  priority: string;
  taskDate: string;
  id: string;
}

export interface Goal {
  name: string;
  isMainGoal: boolean;
  details: string;
  category: string;
  lifeArea: string;
  creationDate: string;
  priority: string;
  endDate: Date;
  id: string;
}

class MyService {
    // 假设 tasksS 和 goalsS 是用于获取数据集合的服务实例
    // 它们应该有类似 tasksCollection() 和 goalsCollection() 的方法
    // 这里为了示例，假设它们是可用的
    private tasksS: any; // 替换为实际的服务类型
    private goalsS: any; // 替换为实际的服务类型

    constructor(tasksService: any, goalsService: any) {
        this.tasksS = tasksService;
        this.goalsS = goalsService;
    }

    getTasksByCategory(category: string): Observable<any> {
        // 1. 预处理 goals 流：筛选目标并提取 ID
        const goalIds$ = this.goalsS.goalsCollection().pipe(
            map((goals: Goal[]) =>
                goals
                    // 筛选出符合指定分类的目标
                    .filter((goal: Goal) => goal.category === category)
                    // 提取这些目标的 ID
                    .map((goal: Goal) => goal.id)
            )
        );

        // 2. tasks 流可以直接使用
        const tasks$ = this.tasksS.tasksCollection();

        // 3. 获取本周日期列表 (非异步操作)
        const daysFromThisWeek = this.getDaysFromThisWeek();

        // 4. 使用 forkJoin 合并预处理后的 goalIds$ 和 tasks$
        return forkJoin({
            goalIds: goalIds$, // 现在 goalIds$ 已经是一个包含 ID 数组的 Observable
            tasks: tasks$,     // tasks$ 是原始任务数组的 Observable
        }).pipe(
            // 5. 根据 goalIds 筛选任务
            map(({ tasks, goalIds }) => {
                let modArr: Task[] = [];
                goalIds.forEach((goalId: string) => {
                    const forModArr = tasks.filter((task: Task) => task.goal_id === goalId);
                    modArr = modArr.concat(forModArr);
                });
                return modArr; // 返回筛选后的任务数组
            }),
            // 6. 统计每天的任务数量
            map((filteredTasks: Task[]) => {
                let finalTasks: number[] = [];
                daysFromThisWeek.forEach((day: string) => {
                    const forFinalTasks = filteredTasks.filter((task: Task) => task.taskDate === day);
                    finalTasks = finalTasks.concat(forFinalTasks.length);
                });
                return finalTasks; // 返回每天任务数量的数组
            })
        );
    }

    // 辅助函数，用于获取本周的日期列表
    private getDaysFromThisWeek(): string[] {
        let daysArr: string[] = [];
        for(let i = 1; i <= 7; i++) {
          daysArr.push(dayjs().startOf('week').add(i, "day").format('YYYY-MM-DD'));
        }
        return daysArr;
    }
}