Angular2: Cannot read property “prop” of undefined at “Component”

Question

Overview:
I have a *ngFor loop that runs through an array ftr.fvA and creates a list of checkboxes. I am creating a function toggle() to toggle between showing only the checked boxes in the list and the entire list.

Error:
I am receiving an error when I try to create a variable that holds the array. The error I get is

Cannot read property 'fvA' of undefined at new FIlterWidgetCategoryComponent

However, what I don't understand is why can't I access this property? I created a variable inside my toggle() function with the same mainData = this.ftr.fvA; and I don't receive the error anymore.
But I need my variable to be outside my function because my constructor needs access to it.

ts file:

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 file:

<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

Its happening because your template is trying to render something based on data from an input in the component that hasn't been instantiated yet. The template tries to render immediately when the component loads. It won't really wait for the Inputs unless you tell it to.

You can try adding an *ngIf statement that won't render that part of the template until this.ftr exists.

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

or you can try instantiating the input to some default value in the component, so it will have some kind of fallback when it first renders the template. I'm not familiar with the 'Filter' object though, so I don't know what a default / blank filter would look like.