從服務收到的數組對象，但無法遍歷它？

-1

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

我加入一個按鈕確保從服務發送的數據實際上是以正確的格式接收的（如截圖中所示，當子組件添加成分時它會完美地發送對象），但是當我嘗試將其與表格一起呈現時，我會看到錯誤：

我知道該服務不是問題，因爲我的'test（）'函數只記錄數組及其全部內容，如截圖所示。

來源

2017-10-11 Cacoon

是否有應該在控制檯窗口的截圖顯示一些陣列？我看到一個對象name ='fawf'，ID = 20，但沒有數組。數組將顯示在方括號內，而不是捲曲的。 –

一種解決方法這裏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]); 
    } 
}

發現的伎倆

來源

2017-10-11 00:52:31 Cacoon

https://github.com/angular/angular/issues/6392 這似乎列出了一個類似的問題，他們通過做一個小小的'黑客'來解決這個問題，以克服這個錯誤。

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

來源

2017-10-11 00:36:19

我試過了，不害怕）： –

從服務收到的數組對象，但無法遍歷它？

回答

相關問題