如何在Angular中通过外键关联父子数据并进行数据增强

interface Task {
  id: string;
  name: string;
  description: string;
  goal_id: string; // 外键，关联到Goal对象
  isMainGoal: boolean;
  // ... 其他任务属性
}

interface Goal {
  id: string;
  name: string;
  category: string; // 我们需要添加到Task中的数据
  // ... 其他目标属性
}

import { Injectable } from '@angular/core';
import { GoalsService } from './goals.service'; // 假设你的GoalsService在此

@Injectable({
  providedIn: 'root'
})
export class DashboardComponent implements OnInit {
  // ... 其他属性和构造函数

  constructor(private tasksService: TasksService, private goalsService: GoalsService) {}

  /**
   * 根据任务项获取其关联目标分类的异步方法
   * 将Observable转换为Promise，以便于async/await使用
   */
  getGoalCategory(item: any): Promise<string> {
    return new Promise((resolve, reject) => {
      this.goalsService.getGoalById(item.goal_id)
        .subscribe(
          (goals: any[]) => {
            // 假设getGoalById返回一个数组，我们取第一个元素的category
            if (goals && goals.length > 0) {
              resolve(goals[0].category);
            } else {
              resolve('未知分类'); // 或者根据业务需求处理未找到的情况
            }
          },
          error => {
            console.error('获取目标分类失败:', error);
            reject(error); // 拒绝Promise，处理错误
          }
        );
    });
  }

  // ...
}

import { Component, OnInit } from '@angular/core';
import { TasksService } from './tasks.service'; // 假设你的TasksService在此
import { GoalsService } from './goals.service'; // 假设你的GoalsService在此
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor(private tasksService: TasksService, private goalsService: GoalsService) {}

  ngOnInit() {
    this.tasksService.tasksCollection()
      .pipe(
        // 第一个map操作符将每个任务项转换为一个Promise
        map(tasksArray => {
          return tasksArray.map(async (item: any) => {
            // 使用await等待getGoalCategory Promise的解析
            const goalCategory = await this.getGoalCategory(item);
            return {
              ...item, // 使用展开运算符保留所有原有属性
              goalCategory: goalCategory // 添加新的goalCategory属性
            };
          });
        })
      )
      .subscribe(async (tasksPromises: Promise<any>[]) => {
        // 订阅回调函数也标记为async
        // 使用Promise.all等待所有任务项的Promise都解析完成
        const completedTasks = await Promise.all(tasksPromises);
        console.log('增强后的任务列表:', completedTasks);
        // 可以在这里将completedTasks赋值给组件属性，以在模板中显示
      }, error => {
        console.error('获取或处理任务时发生错误:', error);
      });
  }

  /**
   * 根据任务项获取其关联目标分类的异步方法
   * 将Observable转换为Promise，以便于async/await使用
   */
  getGoalCategory(item: any): Promise<string> {
    return new Promise((resolve, reject) => {
      this.goalsService.getGoalById(item.goal_id)
        .subscribe(
          (goals: any[]) => {
            if (goals && goals.length > 0) {
              resolve(goals[0].category);
            } else {
              resolve('未知分类'); // 根据业务需求处理
            }
          },
          error => {
            console.error('获取目标分类失败:', error);
            reject(error);
          }
        );
    });
  }
}