如何在模型中定义嵌套对象？ (angular2/typescript)

Question

我正在玩 Angular2，希望有人能就如何实现这一目标提供一些建议；

例如，如果我的模型目前看起来像这样的员工：

export class Employee {
    constructor(
        public firstName: string,
        public lastName: string,
        public email: string,
        public days: string,
        public hours: string, 
    ){}
}

我想把days/hour放到自己的对象中，怎么实现？

（即喜欢..）

public availability: {
        public days: string,
        public hours: string
},

然后 http get 请求会像下面一样保持不变吗？

getEmployees() {
      return this.http.get('...')
             .map((response: Response) => {
                 const data = response.json().obj;
                 let objs: any[] = [];

                 for(let i = 0; i < data.length; i++) {
                     let employee = new Employee(
                     data[i].firstName,
                     data[i].lastName, 
                     data[i].email, 
                     data[i].availability.days,
                     data[i].availability.hours
                     );

                     objs.push(employee)
                 }
                 return objs
             })
          }

澄清一下，我想要 return 之类的 get 请求；

var obj = {
    firstName: "test",
    lastName: "test",
    email: "test",
    availability: {
      days: "test",
      hours: "test"
    }
  }

希望有人能帮帮忙！我试图环顾四周，但没有遇到任何可以提供帮助的东西。

Answer 1

像这样

export class Employee {
    constructor(
        public firstName: string,
        public lastName: string,
        public email: string,
        public availability: Availability // refer to type Availability  below
    ){}
}

export class Availability {
    constructor(
        public days: string,
        public hours: string
    ){}
}

Http get 请求应该保持不变，然后更改创建新员工实例的方式

let employee = new Employee(
    data[i].firstName,
    data[i].lastName,
    data[i].email,
    new Availability(
          data[i].availability.days,
          data[i].availability.hours
    )
);

Answer 2

对于几年后出现的任何人来说，有一个有用的库可以帮助解决这个问题，叫做 class-transformer。

使用这个库是最简单的：https://github.com/typestack/class-transformer

import { Type } from 'class-transformer';

export class Employee {
    firstName: string;
    email: string;
    days: string;
    hours: string;

    @Type(() => Availability)
    availablity: Availablity

    constructor(args: Employee) {
      Object.assign(this, args);
    }
}

export class Availability {
    days: string;
    hours: string;

    constructor(args: Availability) {
      Object.assign(this, args);
    }
}

一些事情发生了变化：

@Type装饰器的使用来自class-transformer模块。这允许您转换嵌套对象。这是文档：https://github.com/typestack/class-transformer#working-with-nested-objects
我们添加了一个 constructor，它允许您创建这些 Class 的实例，并将属性传递给它们各自的类型。看看这个 post 因为它更清楚地说明了这里发生的事情。

那么在您的服务中，您的代码是这样变化的：

import { plainToClass } from 'class-transformer';
import { Employee } from './Employee'

getEmployees() {
  return this.http.get('...')
    .map((response: Response) => plainToClass(Employee, response.json().obj as Employee[]))

plainToClass 将采用原始 JSON 响应并将其转换为您的 Employee Class 的实例。如果您 console.log 得出 getEmployees() 的结果，您将看到它 returns 一个员工数组，每个员工都有一个名为 availability 的属性，类型为 Availability。

Answer 3

就我个人而言（针对 Ionic 项目）

export class Availability {
    days: string  = "";
    hours: string = "";
}

export class Employee {
    firstName: string = "";
    lastName:  string = "";
    email:     string = "";

    availability = new Availability()
}

因此，如果我在 <form> 中使用这些模型，我会收到此 Employee class.

的空结构

当我声明像 employeeObservable : Observable<Employee[]>; 这样的变量时，它也可以工作，例如当我查询 firebase 数据库时...

如何在模型中定义嵌套对象？ (angular2/typescript)

How to define a nested object within model? (angular2/typescript)

angular

typescript

angular2-http