Reputation: 259
I have response with this json hierarchy (content -> categories -> items) the content contains object of categories and each categories contains object of items. So I tried this:
<div *ngFor="let content of data">
<span>{{content.name}}</span>
<div *ngFor="let category of content.categories">
<span>.....</span>
</div>
</div>
<div *ngFor="let item of category.items">
<span>{{item.type}}</span> //this item is undefined because it is out of category looping div
</div>
Upvotes: 1
Views: 12883
Reputation: 3740
Based on the comment of post in @Teun I think you want:
<div *ngFor="let content of data">
<span>{{content.name}}</span>
<div *ngFor="let category of content.categories">
<span (click)="selectedCategory = category">.....</span>
</div>
</div>
<div *ngIf="selectedCategory !== undefined">
<div *ngFor="let item of selectedCategory">
<span>{{item.type}}</span>
</div>
</div>
Upvotes: 1
Reputation: 4145
The scope of *ngFor
object is inside closing tag not outside of that so for achieve this you can use ng-template
you can do like this,
<ng-template let-content ngFor [ngForOf]="data">
<span>{{content.name}}</span>
<ng-template let-category ngFor [ngForOf]="content.categories">
<span>{{category.name}}</span>
<div *ngFor="let item of category.items">
<span>{{item.name}}</span>
</div>
</ng-template>
</ng-template>
and in .ts
data = [{
categories: [{
name: 'xyz',
items: [{
name: 'item1'
}]
}]
}];
Upvotes: 3
Reputation: 926
Place the for loop of the items also inside the div looping through the categories. If you want this div to be outside of the category, then you have to make more loops there as well.
<div *ngFor="let content of data">
<span>{{content.name}}</span>
<div *ngFor="let category of content.categories">
<span>.....</span>
<div *ngFor="let item of category.items">
<span>{{item.type}}</span> //this item is undefined because it is out of category looping div
</div>
</div>
</div>
Categories outside of the other loops:
<div *ngFor="let content of data">
<span>{{content.name}}</span>
<div *ngFor="let category of content.categories">
<span>.....</span>
</div>
</div>
<div *ngFor="let content of data">
<div *ngFor="let category of content.categories">
<div *ngFor="let item of category.items">
<span>{{item.type}}</span>
</div>
</div>
</div>
Upvotes: 0