CODEWITHSUNDEEP
angular
Martijn
Martijn

Reputation: 24789

Angular 2 nested ngFor not iterating

I have this html:

<div class="col-md-4" *ngFor="let category of categories">
  <h3>{{category.name}} ({{category.links.length}})</h3>
  <div>
    <ul>
      <li *ngFor="let link of category.links">
        <a href="" [href]="link.url" target="_blank">{{link.displayName}}</a>
      </li>
    </ul>
  </div>
</div>

As you can see I loop through a list of categories and for each category I loop through a list of links.

The problem is the nested ngFor: it doesn't iterate anything. I am certain that there are items in that list because ({{category.links.length}}) gives ma a result.

Also, when I dump my category list to the console, I can see the complete object graph: every category has at lest one item in the links array.

So, what am I missing here? What do I need to do to get this working?

Edit: This is the generated html (an li tag)

    <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object]"
}-->

here is the corresponsing typescript:

constructor(private linkService: LinkService){
  this.linkService.getLinks().subscribe(p => {console.log(p); this.categories = p});
}

And here are the definitions of Category and LinkItem:

export class Category {
    name : string;
    links = new Array<LinkItem>();

    constructor(name:string)
    {
        this.name = name;
    }

    addLink(linkItem : LinkItem)
    {
        this.links.push(linkItem);
    }
}

export class LinkItem {
    url:string;
    displayName:string;

    constructor(url:string, displayName:string)
    {
        this.url = url;
        this.displayName = displayName;
    }
}

Category dump: Category dump

Upvotes: 0

Views: 1877

Answers (1)

ranakrunal9
ranakrunal9

Reputation: 13558

As per your categories object structure HTML should be as below :

<div class="col-md-4" *ngFor="let category of categories">
  <h3>{{category.name}} ({{category.links.length}})</h3>
  <div>
    <ul>
      <li *ngFor="let link of category.links">
        <a [href]="link.url" target="_blank">{{link.name}}</a>
      </li>
    </ul>
  </div>
</div>

Upvotes: 2

Related Questions