从服务收到的数组对象，但无法遍历它？

-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

我试过了，不害怕）： –

从服务收到的数组对象，但无法遍历它？

回答

相关问题