Ngforを使用して角度2の配列値のDispalyオブジェクト

Question

私はオブジェクトの値の配列を持っています。タイプによって値をグループ化する方法でグループを使用しています。配列値のオブジェクトを与えます.i表示方法に苦労します。角度2でNgforを使用する値。

私は以下の構造値を持っています。

{ 
     [ 
     { 
      id:1 
      body:"value1" 
      type:"name" 
     }, 
     { 
      id:2 
      body:"value1" 
      type:"id" 
     } 
     ], 
     [ 
     { 
      id:3 
      body:"value1" 
      type:"name" 
     }, 
     { 
      id:4 
      body:"value1" 
      type:"id" 
     }, 
     { 
      id:5 
      body:"value1" 
      type:"name" 
     } 
     ], 
     [ 
     { 
      id:6 
      body:"value1" 
      type:"id" 
     }, 
     { 
      id:7 
      body:"value1" 
      type:"fname" 
     }, 
     { 
      id:8 
      body:"value1" 
      type:"fname" 
     } 
     ] 
    } 

私のHTMLコードはです。

<div *ngFor="let value of result"> 
{{value.body}} 
</div> 

Answer 1

ngForのみArray要素に取り組んでいます。また、あなたの現在のJSONは無効と思われます。あなたは簡単に単一の配列に配列を平らにし、何を持っていることはそれもJSONではありません、オブジェクトの配列ではありませんDOM

<div *ngFor="let value of flattenArray"> 
    {{value.body}} 
</div> 

コンポーネント

flattenArray = []; 
//after retrieving result, create flatten array. 
for(let value of result){ 
    this.flattenArray.conact(value); 
} 

Answer 2

でそれをレンダリングするngForを使用することができますが（！とofcourseの、昏睡を追加）：

[ 
    [ 
    { 
     id:1, 
     body:"value1", 
     type:"name" 
    }, 
    { 
     id:2, 
     body:"value1", 
     type:"id" 
    } 
    ], 
    [ 
    { 
     id:3, 
     body:"value1", 
     type:"name" 
    }, 
    { 
     id:4, 
     body:"value1", 
     type:"id" 
    }, 
    { 
     id:5, 
     body:"value1", 
     type:"name" 
    } 
    ] 

、 あなたが最初に置き換えたときに、{} []、とする（ https://jsonlint.com/でそれを確認してください）すべての意志が有効なJSONあり、ここで、正常に動作します

]

、その後、角度ビュー：

<div *ngFor="let items of result"> 
    <div *ngFor="let value of items"> 
     {{value.body}} 
     </div> 
</div> 

Answer 3

みんなのresponse.iのおかげで、質問のためのソリューションを得ました。

let value = _.groupBy(data, "type"); 
    for (let key in value) { 
     content.push({ key: key, value: value[key] }); 
    } 

と私のHTMLは

<div *ngFor="let keys of content"> 
    <div *ngFor="let value of keys.value"> 
     {{value.body}} 
    </div> 
</div>