CODEWITHSUNDEEP
angulartypescript
Rafael Augusto
Rafael Augusto

Reputation: 797

Cannot read property 'toUpperCase' of undefined ("

I'm creating a dropdown component in my application, but I'm getting the following error: Cannot read property 'toUpperCase' of undefined ("

ncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("
  </a>
  <ul class="dropdown-menu">
    <li [ERROR ->]*ngFor="let item of {{lista}}" >
      <a href="#paper">{{item.id}}</a>
    </li>
"): ng:///AppModule/PfDropdownComponent.html@12:8
Can't bind to '*ngFor' since it isn't a known property of 'li'. ("
  </a>
  <ul class="dropdown-menu">
    <li [ERROR ->]*ngFor="let item of {{lista}}" >
      <a href="#paper">{{item.id}}</a>
    </li>

Component:

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

html:

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

Upvotes: 0

Views: 5764

Answers (1)

Chandru
Chandru

Reputation: 11184

try like this :

use <li *ngFor="let item of lista"> instead of <li *ngFor="let item of {{lista}}">

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

Upvotes: 1

Related Questions