javascript - 如何在对象数组中使用 *ngFor 循环？

Question

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

对象.json

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

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

this.fruits = data[0].item;

问题是我只能通过索引确定第一项或第二项的范围，依此类推。我如何确定它们的范围，然后使用 *ngFor 在 HTML 文件中显示它们？

Answer 1

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

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

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

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