Как удалить узел из вложенного дерева в угловых 5? - PullRequest
Новая
       21

Как удалить узел из вложенного дерева в угловых 5?

0 голосов
/ 05 сентября 2018

Этот код будет работать для создания вложенной древовидной структуры. Я также могу добавить подузел. Я застрял, чтобы удалить текущий узел и его дочерние элементы. Как удалить текущий узел и его дочерние элементы при нажатии кнопки удаления и как добавить новый узел того же уровня 

    @Component({
          selector: 'tree-node'
          template: `
          <div>{{node.name}} <button(click)="addNewNode(node)">Add</button> <button (click)="removeNode(node)">Remove</button></div>
          <ul>
            <li *ngFor="let node of node.children">
              <tree-node  [node]="node"></tree-node>
            </li>
          </ul>
        `})

  export class TreeNode {
          @Input() node;
    addNewNode(node) {
        const newNode = {name: 'newNode', children: []};
        node.children.push(newNode);

   }

    removeNode(node) {
    node.children = [] // this code will remove only its child node
    }
}
         @Component({
          selector: 'my-app',
          providers: [],
          template: `
            <div>
              <h2>Hello {{name}}</h2>
              <tree-node [node]="node"></tree-node>
            </div>
          `,
          directives: [TreeNode]
        })
        export class App {
          constructor() {
            this.name = 'Angular2 (Release Candidate!)'
          }

          node = {name: 'root', children: [
            {name: 'a', children: []},
            {name: 'b', children: []},
            {name: 'c', children: [
              {name: 'd', children: []},
              {name: 'e', children: []},
              {name: 'f', children: []},
             ]},
          ]};  
        }

1 Ответ

0 голосов
/ 25 января 2019

Операцию добавления, удаления и обновления можно найти в дереве вложенных материалов Angular 6 Angular 6 Material Nested Tree не работает с динамическими данными

...