如何在angular 2中创建包含对象数组的模型

Question

我正在尝试为这个响应创建一个模型，以便将数据存储到模型中，并根据需要使用它

响应

[
  {
    "Id": 0,
    "ApimId": "5746ebcfcd7c3209247edc40",
    "Name": "Atea Service Desk",
    "Description": "Service Desk and Operations",
    "SubscriptionRequired": false,
    "ApprovalRequired": false,
    "State": "published",
    "Apis": [
      {
        "Id": 0,
        "ApimId": "5746ba28804136004d040001",
        "Name": "Echo API",
        "Description": null,
        "ServiceUrl": "http://echoapi.cloudapp.net/api",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.2553822+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.2553822+05:00",
        "UpdatedBy": "LHR\\ahja"
      },
      {
        "Id": 0,
        "ApimId": "574c167dcd7c3216c8c633b3",
        "Name": "Servicedesk and Operations",
        "Description": "Atea Servicedesk and Operations Internal API",
        "ServiceUrl": "http://dev-endpoint.atea.com/RFC",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.2564039+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.2564039+05:00",
        "UpdatedBy": "LHR\\ahja"
      },
      {
        "Id": 0,
        "ApimId": "574eb044cd7c320600975d85",
        "Name": "Swagger Petstore",
        "Description": "This is a sample server Petstore server.  You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/).  For this sample, you can use the api key `special-key` to test the authorization filters.",
        "ServiceUrl": "http://petstore.swagger.io/v2",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.2574041+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.2574041+05:00",
        "UpdatedBy": "LHR\\ahja"
      },
      {
        "Id": 0,
        "ApimId": "574eb27fcd7c320600975d86",
        "Name": "Swagger Petstore API",
        "Description": "This API is design by Swagger.io",
        "ServiceUrl": "http://petstore.swagger.wordnik.com/api",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.2584048+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.2584048+05:00",
        "UpdatedBy": "LHR\\ahja"
      }
    ],
    "CreatedDate": "2016-10-04T18:49:32.2594056+05:00",
    "CreatedBy": "LHR\\ahja",
    "UpdatedDate": "2016-10-04T18:49:32.2594056+05:00",
    "UpdatedBy": "LHR\\ahja"
  },
  {
    "Id": 0,
    "ApimId": "57eb9930cd7c320760ee317e",
    "Name": "Non Workflow",
    "Description": "Workflow not applied to the contained APIs",
    "SubscriptionRequired": false,
    "ApprovalRequired": false,
    "State": "published",
    "Apis": [
      {
        "Id": 0,
        "ApimId": "574eb044cd7c320600975d85",
        "Name": "Swagger Petstore",
        "Description": "This is a sample server Petstore server.  You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/).  For this sample, you can use the api key `special-key` to test the authorization filters.",
        "ServiceUrl": "http://petstore.swagger.io/v2",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.8218186+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.8218186+05:00",
        "UpdatedBy": "LHR\\ahja"
      },
      {
        "Id": 0,
        "ApimId": "574eb27fcd7c320600975d86",
        "Name": "Swagger Petstore API",
        "Description": "This API is design by Swagger.io",
        "ServiceUrl": "http://petstore.swagger.wordnik.com/api",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:32.8228184+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:32.8228184+05:00",
        "UpdatedBy": "LHR\\ahja"
      }
    ],
    "CreatedDate": "2016-10-04T18:49:32.8238186+05:00",
    "CreatedBy": "LHR\\ahja",
    "UpdatedDate": "2016-10-04T18:49:32.8238186+05:00",
    "UpdatedBy": "LHR\\ahja"
  },
  {
    "Id": 0,
    "ApimId": "5746ba28804136004d060001",
    "Name": "Starter",
    "Description": "Subscribers will be able to run 5 calls/minute up to a maximum of 100 calls/week.",
    "SubscriptionRequired": false,
    "ApprovalRequired": false,
    "State": "notPublished",
    "Apis": [],
    "CreatedDate": "2016-10-04T18:49:33.4234324+05:00",
    "CreatedBy": "LHR\\ahja",
    "UpdatedDate": "2016-10-04T18:49:33.4234324+05:00",
    "UpdatedBy": "LHR\\ahja"
  },
  {
    "Id": 0,
    "ApimId": "5746ba28804136004d060002",
    "Name": "Unlimited",
    "Description": "Subscribers have completely unlimited access to the API. Administrator approval is required.",
    "SubscriptionRequired": false,
    "ApprovalRequired": false,
    "State": "published",
    "Apis": [
      {
        "Id": 0,
        "ApimId": "5746ba28804136004d040001",
        "Name": "Echo API",
        "Description": null,
        "ServiceUrl": "http://echoapi.cloudapp.net/api",
        "ScopeId": 0,
        "WorkflowId": 0,
        "Workflow": null,
        "Scope": null,
        "CreatedDate": "2016-10-04T18:49:33.9833659+05:00",
        "CreatedBy": "LHR\\ahja",
        "UpdatedDate": "2016-10-04T18:49:33.9833659+05:00",
        "UpdatedBy": "LHR\\ahja"
      }
    ],
    "CreatedDate": "2016-10-04T18:49:33.9843647+05:00",
    "CreatedBy": "LHR\\ahja",
    "UpdatedDate": "2016-10-04T18:49:33.9843647+05:00",
    "UpdatedBy": "LHR\\ahja"
  }
]

我创建了两个类，一个是Product，另一个是Api。下面是我对这些类实现。

Api接口

export class ApiModel {
    public ProductId: number;
    public Apim: string;
    public Name: string;
    public Description: string;
    public ServiceUrl: string;
    public WorkflowId: number;
    public ScopeId: number;
}

产品

export class ProductModel {
    public Id: number;
    public Apim: string;
    public ApprovalRequired: boolean;
    public Name: string;
    public Description: string;
    public ServiceUrl: string;
    public State: string;
    public SubscriptionRequired: boolean;
    public Apis: Array<any>;
}

现在我的问题是，它将响应存储在其中。例如，产品中有许多Apis。如果我想在同一个产品中获得所有的apis

Answer 1

可以使用ClassName[]设置对象数组类型

export class Api{
    Id: 0;
    ApimId: string;
    Name: string;
    Description: string;
    ServiceUrl: string;
    ScopeId: number;
    WorkflowId: number;
    Workflow: any;
    Scope: any;
    CreatedDate: string;
    CreatedBy: string;
    UpdatedDate: string;
    UpdatedBy: string;
}

然后在你的ProductModel中

import {Api} from './api';
export class ProductModel {
    public Id: number;
    public Apim: string;
    public ApprovalRequired: boolean;
    public Name: string;
    public Description: string;
    public ServiceUrl: string;
    public State: string;
    public SubscriptionRequired: boolean;
    public Apis: Api[];
}