Arrays 从服务接收到数组对象，但无法对其进行迭代？

我有一个配方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>

Add{{addRecipeForm.controls.name.value}
...

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

这似乎列出了一个类似的问题，他们通过一个小“黑客”来克服这个错误，从而解决了这个问题

hack(val) {
  return Array.from(val);
}

这里有一个解决办法

这个把戏是不是应该在控制台窗口屏幕截图中显示一些数组？我看到一个对象，其中name='fawf'，ID=20，但没有数组。数组将显示在方括号中，而不是卷曲的括号中。
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}