Array object received from service but cannot iterate through it? - arrays

Question

I have got a recipe web app, and i have a 'add recipe' page with a child component 'add ingredient' nested and called within its HTML as seen here:
<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>
I then added a button to ensure the data sent from the service was actually received in correct format etc (as seen in the screenshot I got it sends the object perfectly when the child component adds the ingredient) but when I try and present it with the table as shown I get this error:
Cannot find a differ supporting object '[object Object]' of type
'fawf'. NgFor only supports binding to Iterables such as Arrays.
I know the service isnt the problem because my 'test()' function just logs the array and its all there as seen in the screenshot.

Answer 1

https://github.com/angular/angular/issues/6392
This seems to list a similar issue and they resolved it by making a small 'hack' to overcome that error.
hack(val) {
return Array.from(val);
}

Answer 2

A workaround found here 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]);
}
}
did the trick