Angular2 + "プロパティXを未定義に読み込めません"

Question

オブジェクトを使用して、コンポーネントに表示されるデータを定義します。 HTTPサービス経由で読み込まれる今のJSONファイルからのデータで配管し、このエラーを取得：

、それはここにある私のメインコンポーネント内で失敗しているように見えます：

import { Component, OnInit } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { Contribution } from '../contribution'; 
import { ContribService } from '../contrib.service'; 
import { Card } from '../card'; 
import { Group } from '../group'; 

@Component({ 
    providers: [ContribService], 
    selector: 'main', 
    templateUrl: './main.component.html', 
    styleUrls: ['./main.component.css'] 
}) 
export class MainComponent implements OnInit{ 
    contrib:Contribution = new Contribution(); 
    constructor(private contribService: ContribService){ 

    } 
    ngOnInit(){ 
    this.contribService.getContribution().subscribe(data=>this.contrib = data); 
    } 
    maskCard: boolean = true; 
    unmaskedCard: string = this.contrib.thisCard.number; 
    maskedCard: string = 'XXXXXXXXXXXX' + this.unmaskedCard.substring(11,15); 
    displayedCard: string = this.maskedCard; 
    maskToggle = function(): void{ 
    if(this.maskCard == true){ 
     this.displayedCard = this.maskedCard; 
    }else{ 
     this.displayedCard = this.unmaskedCard; 
    } 
    } 
} 

私が理解しているところでは、エラーはオブジェクト "thisCard"の問題以上の可能性があります。

どうすれば回避できますか？

Answer 1

this.contribを設定しているサブスクリプションに初期化コードの残りの部分を移動します。それ以外の場合は、サブスクリプションが完了する前に設定されています。

unmaskedCard: string; 
maskedCard: string; 
displayedCard: string; 

ngOnInit(){ 
    this.contribService.getContribution().subscribe(data=> { 
    this.contrib = data; 
    this.unmaskedCard = this.contrib.thisCard.number; 
    this.maskedCard = 'XXXXXXXXXXXX' + this.unmaskedCard.substring(11,15); 
    this.displayedCard = this.maskedCard; 
    }); 
} 

Answer 2

必要なデータが解決される前にプロパティを設定しています。

export class MainComponent implements OnInit{ 
    contrib:Contribution = new Contribution(); 
    maskCard: boolean; 
    unmaskedCard: string; 
    maskedCard: string; 
    displayedCard: string; 
    constructor(private contribService: ContribService){ 

    } 
    ngOnInit(){ 
    this.contribService.getContribution().subscribe(data=> { 
     this.contrib = data; 
     this.maskCard = true; 
     this.unmaskedCard = this.contrib.thisCard.number; 
     this.maskedCard = 'XXXXXXXXXXXX' + this.unmaskedCard.substring(11,15); 
     this.displayedCard = this.maskedCard; 
    }); 
    } 

    maskToggle = function(): void{ 
    if(this.maskCard == true){ 
     this.displayedCard = this.maskedCard; 
    }else{ 
     this.displayedCard = this.unmaskedCard; 
    } 
    } 
}