サービスから受信したが、それを反復できない配列オブジェクト？

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> 

私は、その後にボタンを追加しましたサービスから送信されたデータが実際に正しいフォーマットで受信されていることを確認します（子コンポーネントが要素を追加したときにオブジェクトを完全に送信するスクリーンショットに見られるように）が、エラー：

​​

私の 'test（）'関数はスクリーンショットに見られるように配列とそのすべてを記録するだけなので、サービスは問題ではないことが分かります。

Answer 1

この問題を回避するには、ここに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]); 
    } 
} 

たトリック

Answer 2

https://github.com/angular/angular/issues/6392これは同様の問題を示しているようですが、そのエラーを克服するために小さな「ハック」を作成することで解決しました。

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