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：无法读取属性在“组件”

回答

相关问题