ngFor inside ngFor with two components

Question

I have this:

<div *ngFor=" let item of data " >
  // some details
  <app-child [user]="item"></app-child>
</div>

and in my child:

<div *ngFor=" let element of user " >
  // some details
  <a> {{element.name}} </a>
<div>

I can't read anything in element, what is the right way to achieve this?

EDIT

parent component.ts:

    public data: any = [];


    //API CALLS

    this.result.forEach(item => {
     this.data.push(item);
    });

this is my console.log(data)

and inside it there is an array called (comments) and I want to ngFor it and read the comments inside it, In conclusion I want to ngFor my posts and each post ngFor its comments.

and this is my comments array

Answer 1

Make sure you are taking the user array in your child-component as input

@Input() user : User;

EDIT

It seems your child component is getting an object not an array, so don't use ngFor, directly use

<div  >  
  <a> {{user.name}} </a>
<div>