angular2數組推對象in對象

Question

我正在嘗試創建一個樹結構，其中根節點被命名爲「或」。它應該有「AND」節點作爲它的子節點，反過來應該有「OR」節點作爲它的子節點，等等...... 有人能告訴我這段代碼有什麼問題嗎？

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

這裏是你想達到什麼一個plnkr演示。

通過使用遞歸，您正處於正確的道路上，您只需將新類別Input傳遞給my-app組件，以便它可以呈現它。

下面是組件的完整代碼：

@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

應該DATA1，而不是數據

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