如何在对象数组中与* ngFor循环? [英] How to loop with *ngFor in array of objects?

问题描述

我正在学习Angular2，所以如果我问一个愚蠢的问题，请原谅我.我收到了一系列对象，看起来像这样:

I'm learning Angular2, so please forgive me if I'm asking a stupid question. I am receiving an arrays of objects and it looks like this:

obj.json

data: [
        {
           item: "banana"
        }
     ],
     [
        {
           item: "apple"
        }
     ],
     [
        {
           item: "lemon"
        }
     ]

在我的组件文件中，我设法将其限制在范围内:

In my component file I have managed to scope it in a scope:

this.fruits = data[0].item;

问题是我只能按索引确定第一个项目或第二个项目的范围，依此类推.如何将它们全部确定范围，然后使用 * ngFor 在HTML文件中显示它们?

The issue is I only manage to scope the first item, or the second item and so on, by the index. How can I scope them all and then show them in a HTML file with *ngFor?

推荐答案

您的数组不是有效的JavaScript.假设您的数据实际上是这样的:

Your array isn't valid JavaScript. Assuming your data actually looks like this:

data: [
        {
           item: "banana"
        },
        {
           item: "apple"
        },
        {
           item: "lemon"
        }
     ]

然后，您将像这样遍历数据:

Then you'll iterate through the data like this:

<li *ngFor="let fruit of data">
   <b> {{fruit.item}} </b>           
</li>

这篇关于如何在对象数组中与* ngFor循环?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！