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이 유효하지 않은 것 같습니다. 쉽게 하나의 배열로 배열을 평평하게하고 당신이해야하는 객체의 배열이 아닌 구성 요소를

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

DOM

에

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

Answer 2

그것을 렌더링하는 ngFor를 사용할 수 있지만, 그것은 심지어 JSON 아니다

[ 
    [ 
    { 
     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

감사합니다 모든 사람의 대답을위한 질문에 대한 해결책을 얻었다.

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>