Angular2オブジェクトは未定義のプロパティを設定できません

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' を設定することはできません。ありがとう。あなただけの（：propertyName:Typeコロンは、型注釈などの略）：ここpersonのタイプを定義している

Answer 1

あなたがそうでなければ、最初の値を割り当てる必要があります

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

、それは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); 
      }); 
      } 
     }