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

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

obj.json

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

在我的组件文件，我已经成功地范围它在一个范围：

this.fruits = data[0].item;

问题我是否只能通过索引来确定第一个项目或第二个项目等等的范围。我怎样才能确定它们的全部范围，然后用*ngFor的HTML文件显示它们？

谢谢

来源

2017-02-22 tholo

这是一个无效的对象。 –

您的数组无效JavaScript。假设你的数据实际上是这样的：

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

然后你通过这样的数据迭代：

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

来源

2017-02-22 19:12:37

我没有放置所有对象，但除了关键项目外还有许多其他键。对我来说重要的是我如何通过数组，循环索引来遍历数组，以获取全部数据。请注意，我不知道indexex的数量是多少。 – tholo

@tholo问题不在于键的数量，而在于方括号的放置。你基本上有一个单个对象数组的列表，这不是有效的JavaScript。 –

你不理解我。我没有单个对象数组的列表，我也有其他对象，但我没有命名它们，因为它们对我的例子不重要。 – tholo

你的对象是无效的。我编辑过它。

遍历对象属性，使用：

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

Working plunker

来源

2017-02-22 19:14:09

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>

来源

2017-02-23 11:17:27

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

回答

相关问题