Rafael Augusto Rafael Augusto - 12 days ago 107
TypeScript Question

Component receive list as parameter

I need my component to receive a list of objects to use. But I'm getting the following error:

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>


dropdow-cp.component.ts:

export class PfDropdownComponent implements OnInit {

constructor() { }

ngOnInit() {
}

@Input() items;

}


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>


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' }
]

}


dashborad.component.html

{{lista}}

<pf-dropdown items="{{lista}}"></pf-dropdown>


When calling the {{lista}} tween is not displayed, it is empty.

Answer Source

Use <li *ngFor="let item of items"> and
<pf-dropdown [items]="lista"></pf-dropdown>

You don't need interpolation (i.e. the curly braces '{{}}') as ngFor will take your string as expression which in return will check either for an array in your template or your component class (the .ts file).