角度2の* ngForを使用してリスト内のjson配列値をプリントする方法は？

Question

私はjson配列を持っています。単純なリストに値を出力したいのですが。値を印刷するには？キーバリュー法に従わなければならないのですか？私はJsonの配列構造とサンプルコードを追加しています。それは私にエラーを示しています。

期待される出力

*456 
*123 

or Arun :123 
test:456 

エラー：

"'[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

JSON配列

{ 
     "records": [{ 
      "arun": [1, 2, 3], 
      "test": [4, 5, 6] 
     }] 
    } 

**myTest.ts** 

export class HomePageComponent extends AppComponent { 

    public bundle: any[]; 

    ngOnInit(){ 
    this.readArray(); 
    } 

    readArray() { 
    this.bundle = { 
     "records": [{ 
      "arun": [1, 2, 3], 
      "test": [4, 5, 6] 
     }] 
    } 
    console.log("array",this.bundle); 
    } 

testComponent.html

<ul *ngFor="let det of bundle;"> 
    <li>{{det.records}}</li> 
</ul> 

Answer 1

にあなたは、アレイ上ngForを使用する必要があり、それが<div *ngFor="let record of bundle.records">する必要があり、また、あなたがネストされた配列を持っている、あなたはよう Object.keysを使用してアイテムにアクセスすることができますデモで

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let record of bundle.records"> 
     <ul *ngFor="let key of objectKeys(record)"> 
     <li>{{key}} :: {{record[key]}}</li> 
     </ul> 
    </div> 
    `, 
}) 

DEMO

Answer 2

テンプレートでObject.keysにアクセスでき、* ngForで使用できます。

export class HomePageComponent extends AppComponent { 
    objectKeys = Object.keys; 

その後、テンプレート

<ul *ngFor="let key of objectKeys(bundle.records[0]);"> 
    <li>{{key + ' : ' + bundle.records[0][key]}}</li> 
    </ul>