angular2 array push Objekt in Objekt

Question

Ich versuche eine Baumstruktur zu erstellen, wo der Wurzelknoten "OR" heißt. Es sollte "AND" Knoten als seine Kinder, die wiederum "OR" Knoten als Kinder haben und so weiter haben ... Kann mir jemand sagen, was ist falsch mit diesem Code?

import {Component} from '@angular/core' 
@Component({ 
    selector: 'my-app', 
    template: ` 
     <div *ngFor="let i of data1"> 
      {{i.name}} 
      <button (click)="add(i)">Add node</button> 
      <button *ngIf="i.categories.length >0" (click)="delete(i)">Delete 
       nodes</button> 
      <ul> 
       <li *ngFor="let item of i.categories"> 
        <my-app></my-app> 
       </li> 
      </ul> 
     </div> 
    ` 
}) 
export class AppComponent { 
    name:string; 
    key: string = 'categories'; 
    data1 = [ 
     { 
      name: "OR", 
      categories: [] 
     }, 
    ]; 

    add(data){ 
     var newName = data.name="AND"? "OR" : "AND" 
     var entry = { name: newName, categories: []} 
     data.categories.push(entry); 
    } 

    delete(data) { 
     data.categories = []; 
    }; 
} 

Answer 1

Hier ist eine plnkr Demo von genau DATA1, was Sie erreichen wollen.

Sie waren auf dem richtigen Weg, indem Sie Rekursion verwendeten, die Sie nur die neue Kategorie als Input an die my-app Komponente übergeben mussten, damit es es rendern kann.

Hier ist der vollständige Code für die Komponente:

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
     {{dataRef.name}} 
     <button (click)="add(dataRef)">Add node</button> 
     <button *ngIf="dataRef.categories.length >0" (click)="delete(dataRef)">Delete 
     nodes</button> 
     <ul> 
      <li *ngFor="let item of dataRef.categories"> 
       <!-- you just needed to pass dataRef to keep track of categories --> 
       <my-app [dataRef]="item"></my-app> 
      </li> 
     </ul> 

     </div>` 
}) 
export class AppComponent implements OnInit { 
    @Input() dataRef: any; 

    name: string; 
    key: string = 'categories'; 
    // I don't think we need an array, an object would suffice 
    data1 = { 
     name: "OR", 
     categories: [] 
    }; 

    constructor() { 

    } 

    ngOnInit() { 
     console.log("old", this.dataRef); 
     // use this.data1 for the first time as this.dataRef will be undefined 
     this.dataRef = this.dataRef || this.data1; 
     console.log("new", this.dataRef) 
    } 

    add(data) { 
     var newName = data.name === "AND" ? "OR" : "AND" 
     var entry = { name: newName, categories: []} 
     data.categories.push(entry); 
    } 


    delete(data) { 
     data.categories = []; 
    }; 
} 

Answer 2

Es sollte anstelle von Daten

add(data){ 
    var newName = data.name==="AND"? "OR" : "AND"; 
    var entry = { name: newName, categories: []} 
    data1.categories.push(entry); 
}