Error when use ngFor to loop an array of object with no initialize data

Question

I'm using ngFor to loop through an array object but when the component start its has no data

person : personInfo[] = []

And this is the interface

 personInfo : {
           schoolInfo : {...}[]
           homeInfo : {...}[]
     }

and this is html code:

<ng-container [matColumDef]="colum.name"
 *ngFor="let column of person.shoolInfo"> //Property 'schoolInfo' does not exist on type personInfo
 <th>...</th>
 <td>...</td>
 </ng-container>

The person data will have when I trigger an button event but at the start person have no data to assign and I got the error like above

//Property 'schoolInfo' does not exist on type personInfo

What do I need to do to solve this problem? and thanks for your time

You can use also the "safe operator" ?: <ng-container ...*ngFor="let column of person?.schoolInfo">, but to define an interface you need remove the ":", e.g. interface personInfo{schoolInfo:number[]} — Eliseo
– Eliseo, Commented May 31, 2022 at 19:08

Mahdi Rezazadeh · Accepted Answer · 2022-05-31 16:21:42Z

1

Based on your usage for a person, the person must be an Object not an Array.

person: personInfo = {
  schoolInfo: []
  homeInfo: []
}

And then you can use it in ngFor without any problem.

answered May 31, 2022 at 16:21

Mahdi Rezazadeh

5363 silver badges10 bronze badges

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

Comments

Neel Shah · Accepted Answer · 2022-06-01 03:29:17Z

1

Another solution will be if you have multiple persons, you can generate multiple tables,

// person : personInfo[] = []; - this was written
persons : personInfo[] = []; // instead make it persons

In the HTML or template let's make the changes accordingly to make this code work.

<ng-container *ngFor="let person of persons">
  <ng-container [matColumDef]="colum.name" 
    *ngFor="let column of person.shoolInfo"> 
    //Property 'schoolInfo' does not exist on type personInfo

    <th>...</th>
    <td>...</td>
  </ng-container>
</ng-container>

answered Jun 1, 2022 at 3:29

Neel Shah

1715 bronze badges

Collectives™ on Stack Overflow

Error when use ngFor to loop an array of object with no initialize data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related