オブジェクトの配列で* ngForを使ってループする方法は？

Question

私はAngular2を学んでいますので、愚かな質問をしている場合は私を許してください。私は、オブジェクトの配列を受け付けておりますし、それは次のようになります。

this.fruits = data[0].item; 

問題：私はスコープ内のスコープにそれを管理している私のコンポーネントファイルで

obj.json

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

私は最初の項目、または2番目の項目などの範囲をインデックスで管理するだけですか？それらをすべてどのようにスコープしてから、*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

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>