Rafael Augusto Rafael Augusto - 3 years ago 448
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 ("
<ul class="dropdown-menu">
<li [ERROR ->]*ngFor="let item of {{items}}">
<a href="#paper">{{item.id}}</a>


export class PfDropdownComponent implements OnInit {

constructor() { }

ngOnInit() {

@Input() items;



<div class="dropdown">
<ul class="dropdown-menu">
<li *ngFor="let item of {{items}}">
<a href="#paper">{{item.id}}</a>


import { Component, OnInit, Input } from '@angular/core';

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




<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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download