角度2 <strong>角度2</strong>、私は次のようなデータを持っている内作業する階層型データ

Question

からフラットなリストをレンダリング1つのフラットリスト内の製品：

<ul> 
    <li>Level 1: ABC Product</li> 
    <li>Level 2: DEF Product</li> 
    <li>Level 2: XYZ Product</li> 
    <li>Level 3: GHI Product</li> 
</ul> 

各レベルはnameでソートする必要があることを心に留めておいてください。どんな助けでも大歓迎です。

Answer 1

あなたが好きなレンダリングする前にデータを準備することができます：

function flatten(arr: any[], property: string, childrenProperty: string, level: number = 1, dict: any = {}) { 
    return arr.reduce((acc, cur) => { 
    dict[level] = [...dict[level] || [], { level, data: cur.name }]; 
    flatten(cur[childrenProperty], property, childrenProperty, level + 1, dict) 
    return dict; 
    }, dict); 
} 

... 
export class AppComponent { 
    nodes = { 
    name: 'ABC Product', 
    children: [ 
     { 
     name: 'XYZ Product', 
     children: [ 
      { 
      name: 'GHI Product', 
      children: [] 
      }, 
     ] 
     }, 
     { 
     name: 'DEF Product', 
     children: [] 
     }, 
    ] 
    }; 

    flattenNodes: any[]; 

    ngOnInit() { 
    let dict = flatten([this.nodes], 'name', 'children'); 
    this.flattenNodes = Object.keys(dict).sort((a: any, b: any) => a - b).reduce((acc, cur) => { 
     return [...acc, ...dict[cur].sort((a, b) => (a.data < b.data) ? -1 : (a.data > b.data) ? 1 : 0)]; 
    }, []) 
    } 
} 

Plunker Example

は、なぜあなたはあなたの `nodes`を平らにすることはできません

• Angular 2 - Sublist loop to a select html element