CODEWITHSUNDEEP
angular
MePo
MePo

Reputation: 1074

Angular ngFor not iterating

This is my template

<div *ngIf="attachments">
    <div>
        {{ 'attachments' | translate }}
    </div>
    {{ attachments.data[0].title }} <!-- this works -->
    <div *ngFor="let item of attachments.data"> <!-- this doesn't -->
        <a [href]="item.href">{{ item.title }}</a>
    </div>
</div>

Now when i print title above like this attachments.data[0].title it shows, but when i try to iterate over attachments.data it doesn't show

Sorry i didn't write it. It does not show any error it just does not render

Upvotes: 0

Views: 257

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71891

With the current limited information, there is only one reason it wouldn't work, and that's because it's an Object with numerical string keys and not an Array.

Something like this:

this.attachments = {
  data: {
   0: { title: 'hi' },
   1: { title: 'bye' }
  }
};

You can try to reassign your attachments.data variable where you obtain it:

this.attachments.data = Object.values(this.attachments.data);

Upvotes: 5

Related Questions