Angular 2 Objekt in dem Objekt

Question

Wie kann ich eine Klasse mit dem Namen Bill, die wie einfache Eigenschaften haben string and number & eine andere Eigenschaft, die ein Object einer anderen Klasse Customer ist.

möchte ich die Bill json Objekt bill: Bill sieht wie folgt aus:

bill = { 

    id: "", 
    usage : "", 
    total : "0", 

    customer : { 
     customerFirstname :"", 
     customerLastname :"", 
    } 

    } 

Dieses Objekt wurde in AngularJS korrekt aber nicht in Angular2.

Kundenklasse:

export class Customer{ 
    customerFirstname: string; 
    customerLastname: string; 
    constructor(){ 
    } 
} 

und Bill Klasse: https://www.typescriptlang.org/docs/handbook/classes.html

Für Ihr Beispiel:

import {Customer} from '../customer/customer.model'; 
export class Bill { 

    id : string ; 
    usage: string; 
    total: number; 
    customer : Customer; 
    constructor(){ 
    } 
} 

Answer 1

Sie extends

Ref verwenden

export class Customer { 

    public customerFirstname: string; 
    customerLastname: string; 
    constructor() { 
    } 
    } 

export class Bill{ 

    id: string; 
    usage: string; 
    total: number; 
    customer: Customer; 
    constructor() { 
    } 
} 

Verwendung:

import { Component, OnInit } from '@angular/core'; 
import { Bill } from '../models/Animal'; 

@Component({ 
    moduleId: module.id, 
    selector: 'home', 
    templateUrl: 'home.component.html' 
}) 
export class HomeComponent implements OnInit { 
    bill: Bill = new Bill(); 

    constructor() 
    { 
     console.log(this.bill.customer.customerFirstname) 
    } 

    ngOnInit() { } 
} 

Answer 2

würde ich etwas in den Zeilen tun:

export interface ICustomerProperties { 
    customerFirstname: string; 
    customerLastname: string; 
} 

export class Customer { 
    customerFirstname: string; 
    customerLastname: string; 

    constructor (properties: ICustomerProperties) { 
     this.customerFirstname = properties.customerFirstname; 
     this.customerLastname = properties.customerLastname; 
    } 
} 

export interface IBillProperties { 
    id: string; 
    usage: string; 
    total: string; 
    customer: Customer; 
} 

export class Bill { 
    id: string; 
    usage: string; 
    total: string; 
    customer: Customer; 

    constructor (properties: IBillProperties) { 
     this.id = properties.id; 
     this.usage = properties.usage; 
     this.total = properties.total; 
     this.customer = properties.customer; 
    } 
} 

let customer = new Customer({ customerFirstname: 'first', customerLastname: 'last' }); 
let bill = new Bill({ id: '1', usage: '', total: '', customer: customer}); 

Answer 3

Es gibt absolut keine Notwendigkeit für die Klassen in diesem Fall. Verwenden Sie einfach Schnittstellen, werden Sie Ihre gewünschte Verhalten mit ihnen bekommen, so dass Ihre Schnittstellen:

export interface Bill { 
    id : string ; 
    usage: string; 
    total: number; 
    customer : Customer; 
} 

export interface Customer{ 
    customerFirstname: string; 
    customerLastname: string; 
} 

Sie können eine neue Bill wie so instanziiert:

bill: Bill = <Bill>{}; 

und wenn, wenn Sie möchten, dass Ihre Daten eingeben sein, dass JSON,

{ 
    "id":"1", 
    "usage":"usage", 
    "total":"0", 
    "customer":{ 
    "customerFirstname":"firstname", 
    "customerLastname":"lastname" 
    } 
} 

TS:

this.myService.getBill() 
    .subscribe(data => { 
    this.bill = data; 
    }) 

Diese

Answer 4

ist, weil Ausprägungs customer nicht in Class Bill instanziert wurden und alle Variablen durch Erklärung

Customer Class: 

export class Customer{ 
    customerFirstname: string = ''; 
    customerLastname: string = ''; 
    constructor(){ 
} 
} 

und

Bill Klasse instanziert werden:

import {Customer} from '../customer/customer.model'; 
export class Bill { 

    id : string = '' ; 
    usage: string = ''; 
    total: number = 0; 
    customer = new Customer; 
    constructor(){ 
    } 
}