使用 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: 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>

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

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

angular

typescript

angular-material