Holen Sie sich Eigenschaften in Angular 2 mit Typoskript

Question

Ich versuche, die Eigenschaft fullName zeigen den Vor- und Nachnamen. Wie kann man die get-Eigenschaft zum Laufen bringen?

Siehe hierzu Plunk.

import { Component } from '@angular/core'; 

export class Person { 
    id: number; 
    firstName: string; 
    lastName: string; 
    get fullName(): string { 
    return this.firstName + ' ' + this.lastName; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template:` 
    <h1>{{title}}</h1> 
    <p>My first name is {{person.firstName}}</p> 
    <p>My last name is {{person.lastName}}</p> 
    <h2>My full name is {{person.fullName}}!</h2>` 
}) 
export class AppComponent { 
    title = 'Get property issue'; 
    person: Person = { 
    id: 1, 
    firstName: 'This', 
    lastName: 'That' 
    }; 
} 

EDIT Was ich wollte, war eigentlich zu erreichen, wie Eigenschaften verwenden, erhalten, wenn Sie einen Dienst und eine Zeichnung von dem Ergebnis aufrufen. Aber ich habe es anhand der folgenden Antworten herausgefunden. Vielen Dank!

Mein plunk aktualisiert

Answer 1

Working PLUNKER

Versuchen Sie, diese

import { Component } from '@angular/core'; 

export class Person { 
    constructor(public id: number,public firstName: string, public lastName: string){} 

    get fullName(): string { 
    return this.firstName + ' ' + this.lastName; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template:` 
    <h1>{{title}}</h1> 
    <p>My first name is {{person.firstName}}</p> 
    <p>My last name is {{person.lastName}}</p> 
    <h2>My full name is {{person.fullName}}!</h2> 
    ` 
}) 
export class AppComponent { 
    title = 'Get property issue'; 
    person: Person = new Person(1, 'This', 'That'); 
} 

Answer 2

Sie müssen den Person Typen instanziiert:

constructor() { 
    this.person = new Person(); 
    this.person.id = 1; 
    this.person.firstName = 'This'; 
    this.person.lastName = 'That'; 
} 

In Ihrem Fall die person Eigenschaft entspricht den Person Typen (auf der Strukturebene), aber es ist nicht wirklich ein Instanz des Typs Person, da Sie das Objekt wörtlich definieren. Dies bedeutet, dass Sie alle Eigenschaften in Ihrem literalen Objekt definieren müssen und Sie können das fullName Getter nicht verwenden, da es nicht Teil dieses Objekts ist. Es ist eine Art Besetzung.

Verwenden der Einfachheit halber folgende:

export class Person { 
    constructor(public id: number, 
    public firstName: string, 
    public lastName: string) { 
    } 

    get fullName(): string { 
    return this.firstName + ' ' + this.lastName; 
    } 
} 

In diesem Fall können Sie die folgende verwenden:

export class AppComponent { 
    title = 'Get property issue'; 
    person: Person = new Person(1, 'This', 'That'); 
}