Angular2：無法讀取屬性在「組件」

概述「託」的未定義：
我有通過陣列ftr.fvA運行，並創建一個複選框列表* ngFor循環。我正在創建一個函數toggle()來切換顯示只有列表中的選中框和整個列表。Angular2：無法讀取屬性在「組件」

錯誤：
我收到的錯誤，當我嘗試創建包含該陣列的變量。我得到的錯誤是

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>

來源

2017-08-24 Snorlax

你在哪裏初始化'ftr'？ – DeborahK

@Input（）public ftr：Filter; < - 其頂部的輸入 – diopside

[Angular2 - 無法從我的控制器/構造函數中訪問「輸入」]的可能重複（https://stackoverflow.com/questions/33561845/angular2-cannot-access-inputs-from-我控制器構造函數） –

它的發生，因爲你的模板試圖使基於數據的東西從那個不是招」分量輸入尚未實例化。組件加載時，模板會立即嘗試渲染。除非你告訴它，它不會真的等待輸入。

您可以嘗試添加一個* ngIf語句，該語句不會渲染模板的該部分，直到this.ftr存在。

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

，或者你可以嘗試實例化輸入到組件的一些默認值，所以就會有某種回退時，第一次渲染模板。雖然我不熟悉'Filter'對象，所以我不知道默認/空白過濾器是什麼樣子。

來源

2017-08-24 18:29:03 diopside

Angular2：無法讀取屬性在「組件」

回答

相關問題