角度は、こんにちは、私はコメントし、その回答者のように私のアプリケーションのコメントをレンダリングしたいが、私は私のデータでそれを行う方法についてのアイデアを持っていけないコメントツリー

Question

をレンダリングするテンプレートの再帰ループを作成します。

マイデータルックス以下のような：

それは次のように示すことがshooldので parentは、返信のコメントのIDを参照し

"comments": [ 
    { 
    "id": "30", 
    "content": "Comment 1", 
    "parent": "0", 
    }, 
    { 
    "id": "31", 
    "content": "Comment 2", 
    "parent": "0", 
    }, 
    { 
    "id": "32", 
    "content": "comment 3", 
    "parent": "0", 
    }, 
    { 
    "id": "33", 
    "content": "sub comment 1-1", 
    "parent": "30", 
    }, 
    { 
    "id": "34", 
    "content": "sub comment 2-1", 
    "parent": "31", 
    }, 
    { 
    "id": "35", 
    "content": "sub sub comment 1-1-1", 
    "parent": "33", 
    }, 
    { 
    "id": "36", 
    "content": "sub comment 1-2", 
    "parent": "30", 
    } 
] 

：

Comment 1 
    sub comment 1-1 
    sub sub comment 1-1-1 
    sub comment 1-2 
Comment 2 
    sub comment 2-1 
Comment 3 

が、今まで私は唯一のリストIを持っていますnデータの順序

Answer 1

はい、@alexKhymenkoが正しいです。プレーンなツリーを階層ツリーに変換する必要があります。これを行うにはpipesを使用できます。次に、再帰的なリストをレンダリングして、階層ツリーをレンダリングすることができます。

パイプ：

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

@Pipe({ name: 'converter' }) 
export class ConverterPipe implements PipeTransform { 
    transform(array: any[], id: string = "id", parentId: string = "parent", rootValue: any = "0"): any[] { 
     return this.filterNodes(array, id, parentId, rootValue); 
    } 
    filterNodes(array: any[], id: string, parentId: string, parentValue: any): any[] { 
     return array.filter((node) => { 
      return node[parentId] === parentValue; 
     }).map((node) => { 
      node["items"] = this.filterNodes(array, id, parentId, node[id]); 
      return node; 
     }); 
    } 
} 

マークアップ：

<ng-template #List let-items> 
    <ul> 
     <li *ngFor="let item of items"> 
      {{item.content}} 
      <ng-container *ngTemplateOutlet="List; context:{ $implicit: item.items }"></ng-container> 
     </li> 
    </ul> 
</ng-template> 
<ng-container *ngTemplateOutlet="List; context:{ $implicit: comments | converter }"></ng-container> 

はこのことを示しplunkを参照してください。

Answer 2

1データを整理する必要があります。主なアイデアは、あなたが次にこの答え彼らはツリーを作成するツリーノードコンポーネントを使用しているUse component in itself recursively to create a tree

@Component({ 
selector: 'tree-node', 
template: ` 
<div>{{node.name}}</div> 
<ul> 
    <li *ngFor="let node of node.children"> 
    <tree-node [node]="node"></tree-node> 
    </li> 
</ul> 
` 
}) 
export class TreeNode { 
    @Input() node; 
} 

をチェックアウトし、両親は彼らにこの

node = {name: 'root', children: [ 
{name: 'a', children: []}, 
{name: 'b', children: []}, 
{name: 'c', children: [ 
    {name: 'd', children: []}, 
    {name: 'e', children: []}, 
    {name: 'f', children: []}, 
    ]}, 
]}; 

のようなものを子供を追加見つけるリストを反復処理する必要があります。