在角度 5 中找不到不同的支撑物体

Question

我在角度 5 中使用了 ngfor 指令，我试图在其中从 Firebase 填充行..

我使用的包含ngfor指令的HTML如下：

<!–– getting error here on below tr tag ––>
<tr *ngFor="let row of attendee">
   <td class="left">{{ attendee.first_name }} {{ attendee.last_name }}</td>
   <td class="number1">250</td>
   <td class="table1">{{attendee.table}}</td>
   <td class="right-bill">Bill</td>
</tr>

<!–– getting error here on below tr tag ––>
<tr *ngFor="let row of attendee">
   <td class="left">{{ attendee.first_name }} {{ attendee.last_name }}</td>
   <td class="number1">250</td>
   <td class="table1">{{attendee.table}}</td>
   <td class="right-nobill">No Bill</td>
</tr>

<!–– getting error here on below tr tag ––>
<tr *ngFor="let row of attendee">
   <td class="left">{{ attendee.first_name }} {{ attendee.last_name }}</td>
   <td class="number1">250</td>
   <td class="table1">{{ attendee.table }}</td>
   <td class="right-itemsreceived" (click)="filled1=!filled1">
      <div class="fold" data-filled="true">
         <div class="square" [class.white]="filled1"></div>
         <span #text class="items-text">{{filled1 ?'Items Waiting': 'Items Received'}}</span>
      </div>
   </td>
</tr>

<!–– getting error here on below tr tag ––>
<tr *ngFor="let row of attendee">
   <td class="left">{{ attendee.first_name }} {{ attendee.last_name }}</td>
   <td class="number1">250</td>
   <td class="table1">{{ attendee.table }}</td>
   <td class="right-itemswaiting" (click)="filled2=!filled2">
      <div class="fold" data-filled="true">
         <div class="square" [class.white]="!filled2"></div>
         <span #text class="items-text">{{filled2 ?'Items Received': 'Items Waiting'}}</span>
      </div>
   </td>
</tr>

<!–– getting error here on below tr tag ––>
<tr *ngFor="let row of attendee">
   <td class="left">{{ attendee.first_name }} {{ attendee.last_name }}</td>
   <td class="number1">14</td>
   <td class="table1">{{ attendee.table }}</td>
   <td class="right-unpaid">Unpaid</td>
</tr>

在我上面的 HTML 中，我在每个 tr 的第一行 <tr *ngFor="let row of attendee"> 处收到错误。 当我将鼠标悬停在那条线上时，它会显示：

2 错误
2 错误上下文

在控制台，我也看到以下错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngOnChanges (common.js:2537)

打字稿：

我在打字稿中使用的以下代码：

attendee: Attendee;
constructor(public authService: AuthService) {
const str = localStorage.getItem("attendee");
console.log(str);
if(str) {
this.attendee = JSON.parse(str);
}
}

班级参加者有以下代码：

export class Attendee {
  id: string;
  auction_number: string;
  dietary_restrictions: string;
  email?: string | null;
  first_name: string;
  last_name: string;
  meal_choice: string;
  table: number;
  table_name: string;
  table_type: string;
}

问题陈述：

我想知道我需要在上面的指令中进行哪些更改，以便我能够成功地从 firebase 填充所有内容。

Answer 1

错误说明了问题：

找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

attendee 应该是一个数组或其他可迭代对象，而它是符合Attendee 接口的普通对象。它不能提供给ngFor，因为它代表单行。