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

【问题标题】：How to loop with *ngFor in array of objects?如何在对象数组中使用 *ngFor 循环？
【发布时间】：2017-02-22 19:05:14
【问题描述】：

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

obj.json

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

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

this.fruits = data[0].item;

问题是我只能通过索引来确定第一项或第二项等的范围。如何将它们全部限定范围，然后在带有*ngFor 的 HTML 文件中显示它们？

【问题讨论】：

这是一个无效的对象。

标签： javascript html angular

【解决方案1】：

您的数组不是有效的 JavaScript。假设您的数据实际上如下所示：

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

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

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

【讨论】：

我没有放所有的对象，但是除了key项之外还有很多其他的key。对我来说重要的是如何通过索引循环遍历数组以获取所有数组。请注意，我不知道 indexex 的数量是多少。
@tholo 问题不在于键的数量，而在于方括号的位置。您基本上有一个单个对象数组的列表，这不是有效的 JavaScript。
你不明白我的意思。我没有单个对象的数组列表，我也有其他对象，但我没有命名它们，因为它们对我的示例并不重要..
暂时忘记对象，然后您的声明将如下所示：data: [],[],[]。这不是有效的 JavaScript。你可以有data: [[],[],[]]（数组数组）或data: []（数组），但不是你显示的。

【解决方案2】：

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

要遍历对象属性，请使用：

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

Working plunker

【讨论】：

【解决方案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>

【讨论】：

【解决方案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}}

希望这会有所帮助。

【讨论】：