2017-03-23 133 views
1

我試圖擺脫深度嵌套的JSON對象價值深度嵌套的JSON值。如何ngFor與angular2

我試着用管和我成功地得到鍵和值,但他們是不正確的鍵和值,我打算就搞定了。

任何人都可以請幫助我如何ngFor我下面寫下來的值。

data: { 
category:[ 
{0:{one:'test1', **two**:'test2'}}, 
{1:{one:'test3', **two**:'test4'}}, 
{2:{one:'test5', **two**:'test6'}} 
] 
number:[] 
] 
} 

我想爲'兩''值!

我現在有管

import { Pipe, PipeTransform } from '@angular/core'; 

`@Pipe({name: 'keys'}) 
export class KeysPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
    let keys = []; 
    for (let key in value) { 
     keys.push({key: key, value: value[key]}); 
    } 
    return keys; 
    } 
} 

,並在我的組件模板,我有

<div *ngFor="let one of theme | keys"> 
    <div *ngFor = " let two of one.key | keys"> 
    <div *ngFor = "let three of two.key> 
     <p id="thm-title">{{three.value['two']}}</p> 
    </div> 
    </div> 
</div> 
+0

你可以使用Lodash。 http://stackoverflow.com/a/41453175/2589202 – paqogomez

回答

2

你的管道工程如您所願,你只需要對你的*ngFor循環

一些變化

你混合陣列的對象,並在你的問題,所以我假設如下數據的結構。這個循環將輸出test2test4test6

data = { 
    category: [ 
     { 0: { one: 'test1', two: 'test2' } }, 
     { 1: { one: 'test3', two: 'test4' } }, 
     { 2: { one: 'test5', two: 'test6' } } 
    ] 
} 

HTML

<div *ngFor="let one of data | keys"> 
    <div *ngFor="let two of one.value"> 
     <div *ngFor="let three of two | keys"> 
      {{ three.value['two'] }} 
     </div> 
    </div> 
</div>