Question

我最近开始与Angular合作，目前面临一个非常普遍的问题。

因此，假设我有一个像Employee这样的班级：

class Employee{
    name : string;
}

然后我有另一个班级项目，其中有两名员工作为外键：

class Project{
    subject : string;
    employee1_id : number;
    employee2_id : number;
}

现在，我想显示所有项目，但是我想显示员工的姓名。

所以这意味着我必须：

获取所有项目
对于每个项目一种。通过ID获取第一个员工 b。通过id获取第二个员工

然后我将必须在列表中添加evreything才能显示它。

我的问题是我没有找到任何解决方案来获取项目列表，然后对于每个项目，他们都可以根据当前项目的ID来获得两名员工。

实际上，在所有项目调用之后，我不知道如何为每个员工再次使用两个Oservable，并循环执行。我真的很困惑，我不明白为什么这对我来说是如此困难，这真的很常见。

再次，我是Angular的新手，所以问题可能出在我身上，这就是为什么我需要您的帮助。

谢谢。

Answer 1

似乎您的后端没有为您提供匹配的资源，因此我假设您可以将所有项目和所有员工作为列表获得。我在Stackblitz做了一个工作示例，因此您可以在那继续。

为员工配备项目

您可以通过在数组上使用map()函数来映射Employee的名称。这使您可以从数组中的每个现有对象中定义一个新对象。通过这样做，您可以在保留对象上下文的同时使用所需的信息（名称）对其进行增强。

this.projectsWithEmployeeName = this.backendService.getAllProjects().map(project => {
      return {
        subject: project.subject,
        employee1_id: project.employee1_id,
        employee1_name: this.backendService.getEmployeeById(project.employee1_id).name,
        employee2_id: project.employee2_id,
        employee2_name: this.backendService.getEmployeeById(project.employee2_id).name
      }
    })

这假定您具有以下后端服务：

后端

import { Injectable } from '@angular/core';
import { Project, Employee } from './models';

@Injectable()
export class BackendService {

  constructor() { }

  public getAllProjects(): Project[] {
    return [
      { subject: 'Project Almanac', employee1_id: 1, employee2_id: 2 },
      { subject: 'Project Kitten', employee1_id: 2, employee2_id: 3 },
      { subject: 'Project Unicorn', employee1_id: 3, employee2_id: 1 },
    ]
  }


  public getAllEmployees(): Employee[] {
    return [
      { id: 1, name: 'Bob' },
      { id: 2, name: 'Sarah' },
      { id: 3, name: 'Mary' }
    ]
  }

  public getEmployeeById(id: number): Employee {
    return this.getAllEmployees().find(employee => {
      return employee.id === id;
    })
  }
}

这使您可以获取“员工和项目列表”，定义如下：

export interface Project {
  subject: string;
  employee1_id: number;
  employee2_id: number;
}

export interface Employee {
  id: number;
  name: string;
}

您也可以切换getEmployeeById()函数的功能以调用后端，但是您不应该考虑some type of caching。

角度-从外键获取对象

1 个答案:

为员工配备项目

后端