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

Question

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

obj.json

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

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

this.fruits = data[0].item;

问题是我只能通过索引确定第一项或第二项的范围，依此类推。我怎样才能确定它们的范围，然后将它们显示在 HTML 文件中 *ngFor?

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

export class SomeClass {
    public name: String;
    constructor(_name: String){
       this.name= _name;
    }
}    

let fruits : Array<SomeClass>[new SomeClass("banana"),new SomeClass("apple"),new SomeClass("lemon")];


<li *ngFor="let fruit of fruits">
   <b> {{fruit.name}} </b>           
</li>

Answer 4

我不完全明白问题所在。我也在用这个。

我有一个对象数组：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 循环？

How to loop with *ngFor in array of objects?

html

javascript

angular