Angular2對象不能設置undefined的屬性

Question

所以我在Angular2中有這個小應用程序，我正在嘗試定義一個對象。 這是主要組成部分。

export class ContactComponent  {
    person: {
    firstname: string;
    lastname: string;
}
constructor(private PeopleService: PeopleService){
}

ngOnInit(){

this.PeopleService.fetchData().subscribe(
    data=> {
        this.person.firstname=data.results[0].name.first;
        console.log(this.person.firstname);
    });
  }
}

然后在控制台日志中我得到：

無法設置未定義的屬性“firstname”

我無法弄清楚。 謝謝。

Answer 1

你只是定義的類型person在這里（冒號代表類型的注釋，例如： propertyName:Type ）：

person: {
    firstname: string;
    lastname: string;
}

你在這里做的是告訴編譯器該person是一個具有2個字符串屬性firstname和lastname的對象文字。 它定義了可以存儲在該屬性中的內容，而不是它包含的內容。

您應該首先分配一個值，否則，它將是undefined

interface Person {
    firstname ? : string; // the "?" makes the property optional, 
    lastname ? : string; //  so you can start with an empty object
}
export class ContactComponent {

    person: Person = {}; // initializing with an empty object

    constructor(private PeopleService: PeopleService) {}

    ngOnInit() {

        this.PeopleService.fetchData().subscribe(
            data => {
                this.person.firstname = data.results[0].name.first;
                console.log(this.person.firstname);
            });
    }
}

Answer 2

創建一個類並繼承組件。 例如，請參閱以下代碼

       export class Person{

            firstname: string;
            lastname: string;
        }
        export class ContactComponent  {
        person=Person[];
        constructor(private PeopleService: PeopleService){
        }

        ngOnInit(){

        this.PeopleService.fetchData().subscribe(
            data=> {
                this.person.firstname=data.results[0].name.first;
                console.log(this.person.firstname);
            });
          }
        }

Answer 3

首先在onInit()上聲明person類型的對象。

person p=new person();