While working on my Angular application, I encountered the following error message:
" Cannot read property 'name' of undefined"
https://i.stack.imgur.com/O3vlh.png
I've been searching through my code but am unable to pinpoint the issue. The only reference to 'name' is in a select statement.
Here is the HTML snippet for the select component at Line 24:
<section *ngIf="setPlainHeader" class="p-l-xxl p-r-xxl p-b-md category bg-white-only box-shadow">
<div class="form-group nav navbar-nav navbar-btn m-t-xs m-b-xs">
<label class="col-sm-4 control-label p-t-xs m-t-xs">Category:</label>
<div class="col-sm-8 p-t-xs">
<select
*ngIf="Categories"
(change)="categoryChange()"
name="category"
[(ngModel)]="selectedCategory"
class="form-control">
<option
*ngFor="let item of Categories | async "
[value]="item.categoryId" label="">
{{item?.name}}
</option>
</select>
</div>
</div>
</section>
Here is the relevant TypeScript code:
selectedCategory: any = '-1';
ngOnInit() {
this.Categories=this.commonServ.getCategoryData()
}
categoryChange() {
this.commonServ.setSelectedCategory(this.selectedCategory);
}
The categories are loading fine, but I keep encountering this error in the console which is affecting the rendering process.
EDIT: After further investigation, I noticed that the error occurs when the section in the header becomes hidden/visible based on setPlainHeader. Can anyone provide guidance on how to resolve this issue?
Thank you!