Angular2：无法读取“组件”中未定义的属性“ prop”

Question

概述：
我有一个* ngFor循环，该循环通过数组ftr.fvA运行并创建复选框列表。 我正在创建一个函数toggle()来在仅显示列表中的复选框和整个列表之间进行切换。

错误：
当我尝试创建一个包含数组的变量时出现错误。 我得到的错误是

Cannot read property 'fvA' of undefined at new FIlterWidgetCategoryComponent

但是，我不明白为什么我不能访问此属性？ 我在toggle()函数内创建了一个变量，其变量与mainData = this.ftr.fvA;相同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

之所以发生这种情况，是因为您的模板正在尝试根据尚未实例化的组件中输入的数据来呈现某些内容。 组件加载后，模板尝试立即渲染。 除非您告知，否则它不会真正等待输入。

您可以尝试添加* ngIf语句，直到this.ftr存在，该语句才呈现模板的该部分。

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

或者您可以尝试将输入实例化为组件中的某个默认值，这样在首次呈现模板时它将具有某种后备功能。 我不熟悉“过滤器”对象，所以我不知道默认/空白过滤器的外观。