eine Baumansicht von Daten generieren Beziehungen Eltern-Kind beschreibt

Question

die Eingangsdaten gegeben

+-------+---------+ 
| node | subnode | 
+-------+---------+ 
| 3 | 6 | 
| 3 | 7 | 
| 3 | 8 | 
| 3 | 9 | 
| 6 | 8 | 
| 7 | 9 | 
| 9 | 8 | 
+-------+---------+ 

z.B. als 2D-Array:

const tree = [ 
    [3, 6], 
    [3, 7], 
    [3, 8], 
    [3, 9], 
    [6, 8], 
    [7, 9], 
    [9, 8] 
]; 

beschreibt diesen Baum:

3 
├─ 6 
│ └─ 8 
├─ 7 
│ └─ 9 
│  └─ 8 
├─ 8 
└─ 9 
    └─ 8 

Wie eine Angular-Lösung implementieren diese Seite auf einem Web zu zeigen, lassen Sie uns sagen, wie verschachtelt <div> s wie

<div id="node3" style="padding-left:2em">3<div id="node6" [...]</div> 

? Illustration:

Answer 1

Günter Zöchbauer verknüpft seine solution, die gut für einfache Fälle funktionieren, wo die Baumansicht „passiv“ ist, so ist es nur einige Daten als statisches Element sichtbar zu machen.

Wenn jedoch zwischen dem Baum in der Vorlage und der Komponente kommuniziert werden soll (z. B. ein Knoten hat ein (click) Ereignis, das eine in der Komponente definierte Methode aufruft), da die Lösung von Günter rekursiv in sich abgeschlossen verwendet Wenn jeder Knoten eine eigene Direktive hat, kann es zu Problemen kommen:

Die Handhabung des Baumes als Ganzes von der Komponente wird aufgrund mehrerer Bereiche erschwert, die durch die Wiederholung der Komponente erzeugt werden. (- Korrigieren Sie mich, wenn ich falsch liege.)

Deshalb brauchte ich eine andere Lösung, die nur Vorlage ist und auf diese Weise nicht die Komponente für jeden Knoten repliziert wird. Hier ist sie:

In dem .ts:

const nodes = [{ 
    number: 3, 
    children: [{ 
    number: 6, 
    children: [{ 
     number: 8, 
     children: [] 
    }] 
    }, { 
    number: 7, 
    children: [{ 
     number: 9, 
     children: [{ 
     number: 8, 
     children: [] 
     }] 
    }] 
    }, { 
    number: 8, 
    children: [] 
    }, { 
    number: 9, 
    children: [{ 
     number: 8, 
     children: [] 
    }] 
    }] 
}]; 

Im .html:

<ng-template #recursion let-nodes> 
    <div style="margin-left:2em" *ngFor="let node of nodes"> 
    {{node.number}} 
    <ng-container *ngIf="node.children.length > 0"> 
     <ng-container *ngTemplateOutlet="recursion; 
     context:{ $implicit: node.children }"></ng-container> 
    </ng-container> 
    </div> 
</ng-template> 
<ng-container *ngTemplateOutlet="recursion; 
    context:{ $implicit: nodes }"></ng-container> 

P. S .: Siehe these answers wie tree-nodes zu konvertieren.