Question

我正在尝试创建一个树结构，其中根节点名为“OR”。它应该有“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

应该是data1而不是data

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

Answer 2

这是一个plnkr演示，其中包含您想要实现的目标。

您使用刚才需要的递归来将<?php $lquery = new WP_Query(array('order' => 'DESC')); if($lquery->have_posts()){ while($lquery->have_posts()){ $lquery->the_post(); the_title(); the_content(); } } wp_reset_postdata(); ?>组件作为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 = [];
    };
}

angular2数组在对象中推送对象

2 个答案: