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); 
}