Question

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

obj.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>

Answer 2

您的对象无效。我已经编辑过了。

要迭代对象属性，请使用：

<ul>
  <li *ngFor='let elem of data'>{{ elem.item }}</li>
</ul>

<强> Working plunker

Answer 3

我看不到问题所在。我也在用这个。

我有一个对象数组：private receipts:receipt[]，其中收据是一个包含一些相关数据的对象

export class receipt {
    public imageData;
    private accountNo;
    private tripNo;
    private ticketType;
    //..getters/setters and other variables
}

现在，在填充数组后，我就这样简单地使用它（不要介意离子载玻片，这对div也有效）：

<ion-slide *ngFor="let entry of receipts; let i = index" id="{{'imgSlideContainer_'+i}}">
     <div>
        <img src="{{entry.getImageData()}}" id="{{'imgSlide_'+i}}" (click)="openImageUtil(entry, 'imgSlide_'+i)">
     ...
</ion-slide>

此行为符合预期。对于表单，如果它是可访问的属性，则也可以使用{{entry.imageData}}（是的，我已经测试过了）

对于嵌套对象，您应该可以简单地{{entry.someSubObject.someSubSubObject}}

希望这会有所帮助。

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

3 个答案: