Angular2：プロパティを読み取ることができません「コンポーネント」で、未定義の「小道具」

Question

概要：
私は配列ftr.fvAを通るとチェックボックスのリストを作成* ngForループを持っています。私は関数toggle()を作成して、リスト内のチェックボックスとリスト全体を表示するかどうかを切り替えます。

エラー：
私は配列を保持する変数を作成しようとすると、私はエラーが発生します。私が得るエラーは

Cannot read property 'fvA' of undefined at new FIlterWidgetCategoryComponent 

ですが、なぜ私はこのプロパティにアクセスできないのですか？ toggle()の関数内に同じmainData = this.ftr.fvA;の変数を作成しましたが、エラーは表示されません。
しかし、私の変数は自分の関数の外にある必要があります。なぜなら、私のコンストラクタはその変数にアクセスする必要があるからです。

TSファイル：

export class FilterWidgetCategoryComponent implements OnInit { 


    @Input() public objectTypeName: string; 
    @Input() public objectTypeID: number; 
    @Input() public ftr: Filter; 

    isFullList: boolean = true; 
    data: Array<any> = []; 
    // mainData = this.ftr.fvA; /*Returns an error*/ 


    //public filterOverlay = false; 

    constructor(
    private _qpSvc: QueryPageService, 
    private _element: ElementRef, 
    private zone:NgZone 
) { 
    this.isFullList = true; 
    // this.data = mainData; /*need to access mainData here*/ 
    } 

    ngOnInit() { 
    } 




    onChangeCheckbox1(ftr: Filter, fv:Query__Filter_Value) { 
    let curr = ftr.fvSelectedH[fv.id_Header_Value_ID]; 
    ftr.fvSelectedH[fv.id_Header_Value_ID] = !curr; 
    // console.log("ftr: " + ftr); 
    // console.log("ftr.fva: " + ftr.fvA); 

    } 
get selectedChecked(){ 
    console.log("selected checked: " + this.data); 
    return this.data.filter(opt => opt.value); 
} 

toggle(){ 
    var mainData = this.ftr.fvA; 
    let curr = this.ftr.fvSelectedH; 

    if (!this.isFullList) { 
    this.data = [this.ftr.fvA]; 
     console.log("Now a Fulllist: " + this.data); 
    } else { 
     this.data = [...this.selectedChecked]; 
     // console.log("Now a checked list: " + curr); 
    } 
    this.isFullList = ! this.isFullList 
} 



} 

htmlファイル：

<div id="chkboxList"> 
     <ul id="headerList"> 

     <li *ngFor="let ftrVal of data | filterArray:term:ftr"> 
    <!-- <li *ngFor="let ftrVal of ftr.fvA | filterArray:term:ftr"> --> 

<div id="getCheckBoxes"> 

    <input id="{{ftrVal.id_Header_Value_ID}}" class="mycheckbox" type="checkbox" name="items" value="{{ftrVal.id_Header_Value_ID}}" 
             [checked]="ftr.fvSelectedH[ftrVal.id_Header_Value_ID]" 
             (change)="onChangeCheckbox1(ftr, ftrVal)" 
             > 
            {{ftrVal.txt_Header_Value}} 

           </div> 
          </li> 
         </ul> 
        </div> 
<button id="btnColEx" type="button" (click)="toggle()">Expand</button> 

Answer 1

テンプレートは「hasnコンポーネント入力からのデータに基づいて何かをレンダリングしようとしているので、そのが起こっまだインスタンス化されていません。テンプレートは、コンポーネントが読み込まれるとすぐにレンダリングを試みます。それはあなたがそれを伝えない限り、入力を実際に待つことはありません。

this.ftrが存在するまで、テンプレートのその部分をレンダリングしない* ngIf文を追加できます。

<ul id="headerList" *ngIf="this.ftr"> 

か、それが最初のテンプレートをレンダリングし、フォールバックのいくつかの種類がありますので、あなたは、コンポーネントにいくつかのデフォルト値への入力をインスタンス化してみてください。私は 'フィルタ'オブジェクトに精通していないので、私はデフォルト/空白のフィルタがどのようになるかはわかりません。