是否从服务接收到数组对象,但无法对其进行迭代?

我有一个配方web应用程序,我有一个“添加配方”页面,其中一个子组件“添加配料”嵌套并在其HTML中调用,如下图所示:

<h2>Add {{addRecipeForm.controls.name.value}}</h2>
<form [formGroup]="addRecipeForm">
  ...
  <app-add-ingredient></app-add-ingredient>
  <hr>
  <button type="submit">Add new recipe</button> <button (click)="goBack()">Back</button> <button (click)="test()">check if array was caught</button>
</form>
<p>Recipe ingredient list (from service)</p>
<div *ngIf="ingredientList">
<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Quantity</th>
    <th>Units and Style</th>
  </tr>
  <tr *ngFor="let ingre of ingredientList">
    <td>{{ingre.ID}}</td>
    <td>{{ingre.name}}</td>
    <td>{{ingre.quantity}}</td>
    <td>{{ingre.unitsAndStyle}}</td>
  </tr>
</table>
</div>

然后,我添加了一个按钮,以确保从服务发送的数据实际以正确的格式接收等(如屏幕截图所示,当子组件添加成分时,它完美地发送了对象),但当我尝试将其与表一起显示时,出现了以下错误:

找不到类型不同的支持对象“[对象对象]” “fawf”。NgFor仅支持绑定到数组等可扩展项。

我知道服务不是问题所在,因为我的“test()”函数只记录数组及其所有内容,如屏幕截图所示。