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

Issue

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

Solution

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 By - Mahdi Rezazadeh