Angular 7：NgFor 仅支持绑定到 Iterables，例如 Arrays答案

【问题标题】：Angular 7: NgFor only supports binding to Iterables such as ArraysAngular 7：NgFor 仅支持绑定到 Iterables，例如 Arrays
【发布时间】：2019-04-12 05:36:32
【问题描述】：

我正在尝试在显示屏中显示响应，但在 Angular 7 中不断收到此错误。我尝试检查其他解决方案但没有帮助。 ExpensesComponent.html:2 ERROR 错误：找不到不同的支持“对象”类型的对象“[对象对象]”。仅适用于 Ng 支持绑定到数组等Iterables。

这是我在控制台中的请求的响应。内容：数组（4）

0: {id: 2, description: "LED TV", expenseDate: "2019-04- 
   11T18:00:00.000+0000", expenseAmount: 2000}
    1: {id: 3, description: "LED TV 2", expenseDate: "2019-04- 
    11T18:00:00.000+0000", expenseAmount: 2000}
    2: {id: 4, description: "LED TV 3", expenseDate: "2019-04- 
    11T18:00:00.000+0000", expenseAmount: 13000}
    3: {id: 5, description: "LED TV 4", expenseDate: "2019-04- 
    11T18:00:00.000+0000", expenseAmount: 14000}

这是应该将这些响应设置为局部变量的函数。

expenseList : Expense[];
refreshExpensePage(){
   this.expenseDataService.retriveAllExpenses(this.page).subscribe(
   res=>{console.log(res); 
    console.log(res);
     this.expenseList = res; 
  }
 );

这是费用类别。

 export class Expense{
  constructor(
  public id:number,
  public description : string,
  public expenseDate: Date,
  public expenseAmount: number
    ){
   }
 }

这里是应该在表格中显示数据的 html。

<tr *ngFor='let expense of expenseList'>
    <td>{{expense.id}}</td>
     <td>{{expense.description}}</td>
     <td>{{expense.expenseDate|date}}</td>
     <td><button (click) = "editExpenseById(expense.id)" 
      class="btn 
     btn-success">Edit</button></td>
    <td><button (click) = "deleteExpenseById(expense.id)" 
     class="btn 
     btn-danger">Delete</button></td>
</tr>

【问题讨论】：

标签： angular7

【解决方案1】：

不要使用构造函数创建类，而是尝试定义为接口来定义对象。

export interface Person {
 id:number;
 description : string;
 expenseDate: any;
 expenseAmount: number;
}

并在组件中导入接口以防其在不同文件中定义，然后将接口声明为默认数据类型

expenseList : Person[];

然后在expenseList中分配适当的对象数组

一切顺利

【讨论】：