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"> 

或者您可以嘗試將輸入實例化為組件中的某個默認值，這樣在首次呈現模板時它將具有某種后備功能。 我不熟悉“過濾器”對象，所以我不知道默認/空白過濾器的外觀。