Angular2 英雄之旅 - Hero.ts 属性 和嵌套对象

Question

我正在学习 Angular2 英雄之旅教程，我正在尝试学习如何使用服务。我能够让基本教程开始工作，但是当我尝试变得更复杂一点时，我的应用程序崩溃了，我不确定我做错了什么。

运行良好的基本模型由一个 mock-heroes 对象和一个指定每一行类型的 hero.ts 文件组成。

这里是我指的英雄游教程：https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

hero.ts 文件:

export class Hero {
    id: number;
    firstName: string;
    lastName: string;
    street: string;
    suite: string;
    city: string;
    state: string;
    zipcode: string;
}

模拟-hero.ts 文件：

import { Hero } from './hero';

export const HEROES: Hero[] = 
[
    {
        "id": 101, 
        "firstName": "John",
        "lastName": "Doe",
        "street": "111 Main Street",
        "suite": "Apt. 111",
        "city": "Anytown",
        "state": "US",
        "zipcode": "55555-0000"
    }
]

如果我想添加一个嵌套对象，例如帐户，我会收到错误消息：

Object literal may only specify known properties, and 'accounts' does not exist in type 'Hero'.

hero.ts 文件:

export class Hero {
    id: number;
    firstName: string;
    lastName: string;
    street: string;
    suite: string;
    city: string;
    state: string;
    zipcode: string;
    accounts: ????;
    accountNum: string;
    accountName: string;
    type: string;
    availBalance: number
}

模拟-hero.ts 文件：

import { Hero } from './hero';

export const HEROES: Hero[] = 
[
    {
        "id": 101, 
        "firstName": "John",
        "lastName": "Doe",
        "street": "111 Main Street",
        "suite": "Apt. 111",
        "city": "Anytown",
        "state": "US",
        "zipcode": "55555-0000",
        "accounts": [ 
            {
                accountNum: "012345678",
                accountName: "Personal Checking",
                type: "checking",
                availBalance: 1000.00
            }
        ]
    }
]

所以，我知道我需要识别 "accounts" 但我遗漏了我分类的内容 "accounts" 以便我可以正确嵌套对象。

提前致谢。

Answer 1

export interface Account {
    accountNum: string;
    accountName: string;
    type: string;
    availBalance: number;
}

export class Hero {
    id: number;
    firstName: string;
    lastName: string;
    street: string;
    suite: string;
    city: string;
    state: string;
    zipcode: string;
    accounts: Array<Account>;
}