Angular - получить объект из внешнего ключа - PullRequest
Новая
       8

Angular - получить объект из внешнего ключа

0 голосов
/ 11 сентября 2018

Я недавно начал работать с Angular, и сейчас я сталкиваюсь с проблемой, которая очень распространена.

Допустим, у меня есть класс Employee вроде: 

class Employee{
    name : string;
}

тогда у меня есть другой проект класса с двумя сотрудниками в качестве внешнего ключа: 

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

Теперь я хотел бы отобразить все проекты, НО я хочу отобразить имена сотрудников.

Значит, мне нужно:

  1. Получить весь проект
  2. Для каждого проекта а. Получить первого сотрудника по идентификатору б. Получить второго сотрудника по номеру

Тогда мне нужно будет добавить все в список, чтобы отобразить его.

Моя проблема в том, что я не нашел никакого решения, чтобы получить список проектов, а затем для каждого из них можно было бы получить двух сотрудников в зависимости от их идентификатора для текущего проекта.

На самом деле, после вызова всех проектов, я не знаю, как я могу снова использовать два Oservable для каждого сотрудника, и делать это в цикле. Я действительно застрял, и я не понимаю, почему это так сложно, как для меня что-то действительно общее.

Опять же, я новичок в Angular, поэтому проблема, скорее всего, во мне, поэтому мне нужна ваша помощь.

Заранее спасибо.

1 Ответ

0 голосов
/ 11 сентября 2018

Поскольку кажется, что ваш бэкэнд не предоставляет вам соответствующий ресурс, я предположил, что вы можете получить все проекты и всех сотрудников в виде списка. Я сделал рабочий пример на Stackblitz , так что вы можете следить за ним.

Отображение сотрудников с проектами

Вы можете отобразить имя сотрудника с помощью функции map() в массиве. Это позволяет вам определять новый объект из каждого существующего объекта в массиве. Делая это, вы можете дополнить его необходимой информацией (именем), сохраняя при этом контекст объекта. 

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

Предполагается, что у вас есть следующая внутренняя служба:

Backend 

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(), чтобы вызвать свой бэкэнд, но вам следует рассмотреть некоторый тип кэширования .

...