CODEWITHSUNDEEP
javascriptangulartypescript
Smokey Dawson
Smokey Dawson

Reputation: 9230

*ngFor not looping correctly through items

I cant seem to figure out whats wrong here..

my *ngFor isnt working

my html

<ul class="list">
    <li class="list__seperator">This is some text</li>
    <li *ngFor="let feed of feeds" (click)="selectItem('.tick-' + feed.id)" class="item-{{feed.id}}"><img class="list__tick tick-{{feed.id}}" src="../../../assets/img/svg/icon-tick.svg">{{feed.text}}</li>
</ul>

my component.ts

export class FileComponent implements OnInit {
  feeds: [
     { id: 1, text: 'Example 1' },
     { id: 2, text: 'Example 2' },
     { id: 3, text: 'Example 3' },
     { id: 4, text: 'Example 4' }
  ];

I look at the rendered html where the list items should be there is.. <!--bindings={}-->

to me this should be working? what am I doing wrong?

any help would be appreciated and let me know if you need more information

Upvotes: 1

Views: 2178

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222532

You need to assign the array to the feeds as

  feeds = [
     { id: 1, text: 'Example 1' },
     { id: 2, text: 'Example 2'},
     { id: 3, text: 'Example 3'},
     { id: 4, text: 'Example 4'}
  ];

STACKBLITZ DEMO

Upvotes: 5

Related Questions