当使用ngFor循环一个没有初始化数据的对象数组时出错

Question

我正在使用ngFor来循环遍历数组对象，但是当组件启动时它没有数据

person : personInfo[] = []

这是界面

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

，这是HTML代码:

<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>

当我触发按钮事件时，person数据将具有，但在开始时，person没有数据可分配，我得到了上面的错误

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

我需要做什么来解决这个问题?谢谢你的时间

Answer 1

根据对person的使用，person必须是Object而不是Array。

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

然后你就可以在ngFor中使用它了。

Answer 2

另一个解决方案是，如果您有多个人员，您可以生成多个表，

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

在HTML或模板中，让我们进行相应的更改以使此代码工作。

<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>