Currently, I am diving into the Angular2 Tour of Heroes guide and striving to grasp the concept of services. So far, I've successfully implemented the basic tutorial, but as I attempt to add more complexity, my application crashes without clear reasons.
The initial model that functions properly comprises a mock-heroes object along with a hero.ts file defining the structure of each entity.
You can find the specific Tour of Heroes Tutorial I am following here: https://angular.io/docs/ts/latest/tutorial/toh-pt4.html
hero.ts file:
export class Hero {
id: number;
firstName: string;
lastName: string;
street: string;
suite: string;
city: string;
state: string;
zipcode: string;
}
mock-hero.ts file:
import { Hero } from './hero';
// HEROES array storing mock data
export const HEROES: Hero[] =
[
{
"id": 101,
"firstName": "John",
"lastName": "Doe",
"street": "111 Main Street",
"suite": "Apt. 111",
"city": "Anytown",
"state": "US",
"zipcode": "55555-0000"
}
]
When attempting to introduce a nested object like 'accounts', I encounter the following error message:
Object literal may only specify known properties, and 'accounts' does not exist in type 'Hero'.
hero.ts file (updated):
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
}
mock-hero.ts file:
import { Hero } from './hero';
// HEROES array now includes an 'accounts' nested within the main object
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
}
]
}
]
I understand the need to define "accounts", but I'm uncertain about how to categorize it to correctly nest objects.
Thank you for any assistance provided.