CODEWITHSUNDEEP
angularecmascript-6
Tej Patil
Tej Patil

Reputation: 115

How do I access ngFor variable inside other ngFor?

Following code would be used to show the details of the users. As of now we have only one user and three permission. The array defined as follows:

1) Users  = [{'FirstName':'John','permission':['masters','transactions']}] 
2) permissions = ['masters','transactions','settings']

The first for loop iterates the users and second, the permissions. The logic is, if the permission from permissions exists in users permission then mark the checkbox as true. 

<div  *ngFor="let user of users">  

  <label> user.FirstName </label>

  <ol>
    <li *ngFor="let permission in permissions">
      <input type="checkbox" checked="user.permission.indexOf(permission)"
    </li>
  </ol>

</div>

But it says

Cannot read property 'Permissions' of undefined

How can I access the variable in nested for ?

Upvotes: 0

Views: 56

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58523

As permissions is array you should use of not in , there is no such thing like in this latest angular version :

Change :

<li *ngFor="let permission in permissions">

to

<li *ngFor="let permission of permissions">

You code should look like this :

<div  *ngFor="let user of Users">  
  <label> {{ user.FirstName }} </label>
  <ol>
    <li *ngFor="let permission of permissions">
      {{ permission }}
      <input type="checkbox" [checked]="user.permission.indexOf(permission)> -1 ? true : false">
    </li>
  </ol>
</div>

WORKING DEMO

Upvotes: 3

Related Questions