'ngFor does not work and is providing no data

I have to 2 nested ngFor, the first one works as expected, the second does not work at all.

It shows no data at all for the second.

Here is my code:

component.html

<p-accordion *ngIf="!isLoading">
    <p-accordionTab 
      *ngFor="let userDepartment of userDepartments" 
      [header]="[userDepartment.department]">
        <a *ngFor="let user of userDepartment.users" 
          [routerLink]="[user.id]" 
          routerLinkActive="active">{{user.displayName}}</a>
    </p-accordionTab>
</p-accordion>

UserDepartment.ts

import { SkillUser } from "./skillUser";

export interface UserDepartment{
  department: string;
  users: SkillUser[];
}
htmlangularnestedprimengngfor


Solution 1:[1]

It would be easier to answer if I could see all related codes. But try using index:

 *ngFor="let userDepartment of userDepartments"; let i = index"
     *ngFor="let user of userDepartment[i].users"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AZia

Related Questions