RxJS中整合多数据源操作的策略与实践

// 原始尝试的核心逻辑
class MyService {
    getTasksByCategory(category:string):Observable<any> {
        const daysFromThisWeek = this.getDaysFromThisWeek();
        return forkJoin({
          tasks: this.tasksS.tasksCollection(),
          goals: this.goalsS.goalsCollection(),
        })
        // !!! OPERATIONS ON GOALS !!! 
        .pipe(
          // 1. 过滤目标
          map(({ tasks, goals }) => {
            return goals.filter((item:any) => item.category === category);
          }),
          // 2. 获取目标ID
          map((goals:any) => {
            const goalsIDs = goals.map((item:any) => item.id);
            return goalsIDs; // 这里只返回了 goalsIDs
          })
        )
        // !!! OPERATIONS ON TASKS !!!
        .pipe( // 这是一个新的 pipe，其输入是上一个 pipe 的输出 (goalsIDs)
          // 3. 根据目标ID筛选任务
          map(({ tasks, goalsIDs }) => { // 错误：tasks 在这里是 undefined
            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 => {
          // 4. 统计任务数量
          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 方法省略
}

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 TasksService {
    tasksCollection(): Observable<Task[]> {
        // 实际应用中会从后端获取数据
        return new Observable(observer => {
            setTimeout(() => {
                observer.next([
                    { id: 't1', goal_id: 'g1', name: 'Task 1', description: '', priority: 'High', taskDate: '2023-10-23' },
                    { id: 't2', goal_id: 'g2', name: 'Task 2', description: '', priority: 'Medium', taskDate: '2023-10-24' },
                    { id: 't3', goal_id: 'g1', name: 'Task 3', description: '', priority: 'Low', taskDate: '2023-10-24' },
                    { id: 't4', goal_id: 'g3', name: 'Task 4', description: '', priority: 'High', taskDate: '2023-10-25' },
                    { id: 't5', goal_id: 'g1', name: 'Task 5', description: '', priority: 'Medium', taskDate: '2023-10-26' },
                ]);
                observer.complete();
            }, 100);
        });
    }
}

class GoalsService {
    goalsCollection(): Observable<Goal[]> {
        // 实际应用中会从后端获取数据
        return new Observable(observer => {
            setTimeout(() => {
                observer.next([
                    { id: 'g1', name: 'Goal 1', isMainGoal: true, details: '', category: 'Work', lifeArea: 'Career', creationDate: '2023-10-01', priority: 'High', endDate: new Date() },
                    { id: 'g2', name: 'Goal 2', isMainGoal: false, details: '', category: 'Personal', lifeArea: 'Health', creationDate: '2023-10-05', priority: 'Medium', endDate: new Date() },
                    { id: 'g3', name: 'Goal 3', isMainGoal: true, details: '', category: 'Work', lifeArea: 'Career', creationDate: '2023-10-10', priority: 'High', endDate: new Date() },
                ]);
                observer.complete();
            }, 150);
        });
    }
}


class MyService {
    private tasksS = new TasksService(); // 模拟注入服务
    private goalsS = new GoalsService(); // 模拟注入服务

    /**
     * 获取指定类别下的任务，并按周统计数量
     * @param category 目标类别
     * @returns 一个Observable，发出每周任务数量的数组
     */
    getTasksByCategory(category: string): Observable<number[]> {
        // 1. 预处理 goals 数据流，提取目标ID
        const goalIds$: Observable<string[]> = this.goalsS.goalsCollection().pipe(
            map((goals: Goal[]) =>
                goals
                    // 过滤出指定类别的目标
                    .filter((goal: Goal) => goal.category === category)
                    // 提取这些目标的ID
                    .map((goal: Goal) => goal.id)
            )
        );

        // 2. 获取原始 tasks 数据流
        const tasks$: Observable<Task[]> = this.tasksS.tasksCollection();

        // 3. 获取本周日期列表
        const daysFromThisWeek = this.getDaysFromThisWeek();

        // 4. 使用 forkJoin 合并 goalIds$ 和 tasks$ 的结果
        return forkJoin({
            goalIds: goalIds$, // 包含过滤后的目标ID
            tasks: tasks$,     // 包含所有任务
        }).pipe(
            // 5. 在一个 pipe 中进行所有后续操作
            // 根据目标ID筛选匹配的任务
            map(({ tasks, goalIds }) => {
                let matchedTasks: Task[] = [];
                goalIds.forEach((goalId: string) => {
                    const tasksForGoal = tasks.filter((task: Task) => task.goal_id === goalId);
                    matchedTasks = matchedTasks.concat(tasksForGoal);
                });
                return matchedTasks;
            }),
            // 6. 统计每周任务数量
            map((tasksArr: Task[]) => {
                let finalTasksCount: number[] = [];
                daysFromThisWeek.forEach((day: string) => {
                    const tasksOnDay = tasksArr.filter((task: Task) => task.taskDate === day);
                    finalTasksCount = finalTasksCount.concat(tasksOnDay.length);
                });
                return finalTasksCount;
            })
        );
    }

    /**
     * 获取本周的日期列表（YYYY-MM-DD格式）
     * @returns 包含本周日期的字符串数组
     */
    getDaysFromThisWeek(): string[] {
        let daysArr: string[] = [];
        // dayjs().startOf('week') 默认从周日开始，如果需要从周一开始，可能需要配置dayjs locale
        // 这里假设从周日开始算一周7天
        for(let i = 0; i < 7; i++) { // 从0开始，表示周日到周六
          daysArr.push(dayjs().startOf('week').add(i, "day").format('YYYY-MM-DD'));
        }
        return daysArr;
    }
}

// 示例用法
const myService = new MyService();
myService.getTasksByCategory('Work').subscribe(
    (result: number[]) => {
        console.log('本周按类别筛选的任务数量统计:', result);
    },
    (error: any) => {
        console.error('获取任务失败:', error);
    }
);