Angular nested `ngFor` using variable from outer loop

Question

I am making a dynamic permissions list, how would I go about using the "item" from:

<div *ngFor="let item of PermissionsList.T1">
  <!-- Some code here -->
</div>

in a inner ngFor loop. I have tried the following, and other similar variations:

<p *ngFor="let item2 of PermissionsList.{{item}}">test</p>

The PermissionsList example is like this:

T1: Array [ "Business", "Recreation", "Vehicles" ]

Recreation: Array [ "Hunting", "Leisure" ]

Hunting: Array [ "Big_Game", "Bird", "Pest" ]

Big_Game: Array [ "Moose", "Elk" ]

Pest: Array [ "Wild Boar", "Fox" ]

Bird: Array [ "Geese", "Sharp-tailed grouse" ]

Leisure: Array [ "Hiking", "Bird Watching" ]

Business: Array [ "Trapping", "Utility", "Construction"]

Vehicles: Array [ "Half_ton", "ATV", "SnowMobile" ]

Use PermissionsList[item] instead of PermissionsList.{{item}} — Berk Kurkcuoglu
– Berk Kurkcuoglu, Commented Sep 17, 2020 at 20:54

ng-hobby · Accepted Answer · 2020-09-17 21:07:08Z

1

If PermissionsList is an Array of Arrays and you mean to iterate on the second arrays you can try this:

<div *ngFor="let permission of PermissionsList">
  <div *ngFor="let item of permission ">
    {{ item }}
  </div>
</div>

If PermissionsList is an Object of Arrays and you just want to display T1 for example, try this:

<div *ngFor="let t1 of PermissionsList['T1']">
  {{ t1 }}
</div>

edited Sep 17, 2020 at 21:07

answered Sep 17, 2020 at 21:01

ng-hobby

2,2092 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ng-hobby Over a year ago

Your'e Welcome ;)

Collectives™ on Stack Overflow

Angular nested `ngFor` using variable from outer loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related