[英]Angular2: Cannot read property “prop” of undefined at “Component”
Overview: 概述:
I have a *ngFor loop that runs through an array ftr.fvA
and creates a list of checkboxes. 我有一个* ngFor循环,该循环通过数组ftr.fvA
运行并创建复选框列表。 I am creating a function toggle()
to toggle between showing only the checked boxes in the list and the entire list. 我正在创建一个函数toggle()
来在仅显示列表中的复选框和整个列表之间进行切换。
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;
我在toggle()
函数内创建了一个变量,其变量与mainData = this.ftr.fvA;
相同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: 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 file: 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>
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. 您可以尝试添加* ngIf语句,直到this.ftr存在,该语句才呈现模板的该部分。
<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. 我不熟悉“过滤器”对象,所以我不知道默认/空白过滤器的外观。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.