Question

我们正在开发具有以下模型的应用程序：

interface IEmployee{
    firstName?: string;
    lastName?: string;
}

export class Employee implements IEmployee{
    public firstName?: string;
    public lastName?: string;

    constructor(data: object | Employee) {
        Object.assign(this, data);
    }

    get displayName(): string {
        return this.firstName + ' ' + this.lastName;
    }
}

我们还有另一个模型-Department，它引用了Employee类，如下所示：

interface IDepartment{
    id?: string;
    name?: string;
    employees[]: Employee;
}

我们在项目的两个实例上有两个API调用-一个用于获取用户，另一个用于获取部门。在招募员工时，我们可以使用以下代码填充员工的displayName：

      this.http.get<Employee[]>(`${this.apiURL}\employees`)
      .pipe(map(response => {
        return response.map(data => new Employee(data));
      }));

在让部门工作时，有什么方法可以为所有员工填充员工显示名称吗？

Answer 1

您可以使用combineLatest，在其中您可以为输入定义N个可观察值，例如：

combineLatest([departments$, employee$])
  .pipe(
     map(([departments, employee]) => /* do awesome staff */ )
  );

如果两个都发出值，则地图将执行

Answer 2

好：您的代码是错误的。您不应写：

this.http.get<Employee[]>(`${this.apiURL}\employees`)

API不会返回Employee数组，而是返回IEmployee数组。

您可以这样写：

this.http.get<IEmployee[]>(`${this.apiURL}\employees`)
      .pipe(map(response => response.map(data => new Employee(data))));

那是事实。

如果您有一个API，该API返回部门及其雇员的列表，则可以编写：

    interface DepartmentInternal {
        id?: string;
        name?: string;
        employees: IEmployee[];
    }
    this.http.get<DepartmentInternal[]>(`${this.apiURL}\departments`)
      .pipe(map(response => response.map(dep => ({...dep, employees: dep.employees.map(e => new Employee(e))}))));

这应该返回您的IDepartment[]。

毕竟，这不是编写Typescript / javascript应用程序的好方法。恕我直言，Employee不应实施IEmployee，因为这样做不尊重Liskov替代。

Angular-在模型中使用计算属性

2 个答案: