从服务接收但不能迭代的数组对象？

Question

我有一个食谱网络应用程序，我有一个'添加配方'页面，其子组件'添加成分'嵌套并在其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>

然后我添加了一个按钮，以确保从服务发送的数据实际上是以正确的格式接收的（如截图所示，我得到它在子组件添加成分时完美地发送对象）但是当我尝试呈现时如图所示我得到了这个错误：

  

无法找到不同的支持对象'[object Object]'的类型   'fawf'。 NgFor仅支持绑定到Iterables，例如Arrays。

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

Answer 1

https://github.com/angular/angular/issues/6392 这似乎列出了一个类似的问题，他们通过制作一个小的“黑客”来解决这个错误。

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

Answer 2

此处找到的解决方法Iterate over object in Angular

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]);
  }
}

做了这个伎俩