I am encountering an error while trying to pass a list of objects to my component. The specific error message is:
compiler.es5.js:1694 Uncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("
</a>
<ul class="dropdown-menu">
<li [ERROR ->]*ngFor="let item of {{items}}">
<a href="#paper">{{item.id}}</a>
</li>
In dropdow-cp.component.ts:
export class PfDropdownComponent implements OnInit {
constructor() { }
ngOnInit() {
}
@Input() items;
}
In dropdow-cp.component.html:
<div class="dropdown">
<ul class="dropdown-menu">
<li *ngFor="let item of {{items}}">
<a href="#paper">{{item.id}}</a>
</li>
</ul>
</div>
In dashborad.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'dashboard-cmp',
moduleId: module.id,
templateUrl: 'dashboard.component.html'
})
export class DashboardComponent implements OnInit{
@Input() lista = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
]
}
In dashborad.component.html
{{lista}}
<pf-dropdown items="{{lista}}"></pf-dropdown>
The issue I'm facing is that when calling the {{lista}}, it does not display any content and remains empty.