Как сделать sh Дети в Angular

Question

Я пишу простое приложение дерева узлов, которое принимает ввод, и у меня возникают проблемы с отображением дочерних элементов, созданных с помощью ввода. Общая цель состоит в том, чтобы напечатать количество дочерних элементов, введенных во входные данные, и все дочерние элементы, которые должны быть в диапазоне, также включены во входные данные. Очевидно, я могу напечатать новый узел, но мой лог c не работает как дочерний элемент «root», и число дочерних элементов тоже не печатается. Пожалуйста помоги. Любое руководство будет действительно полезным и ценным. Я новичок в Angular. Чего мне не хватает?

Вот что у меня есть:

nodetree.component. html

<div class="container">

    <div class= "input-div">
        <input type="text" class= "node-input" placeholder ="Enter a Name" [(ngModel)]="nodeName" 
        (keyup.enter)="addNode()">
        <input type="text" class= "node-input" placeholder ="Number of Children" [(ngModel)]="nodeChildren" 
        (keyup.enter)="addNode()">
        <input type="text" class= "node-input" placeholder ="Range Minimum" [(ngModel)]="nodeRangeMin" 
        (keyup.enter)="addNode()">
        <input type="text" class= "node-input" placeholder ="Range Maximum" [(ngModel)]="nodeRangeMax" 
        (keyup.enter)="addNode()">
    </div>

    <div class="col-9 text-center">
        <ul *ngIf="nodes">
            <li class="row node" *ngFor="let node of nodes">

                <span  *ngIf="!node.editing; else editingNode" class="node-name" (dblclick)="editNode(node)">
                    > {{ node.name }}
                </span> 
                <ng-template #editingNode>
                <input type="text" class= "node-edit" [(ngModel)]="node.name" (blur)="editDone(node)" (keyup.enter)="editDone(node)" autofocus>
                </ng-template>
                <span class="node-range">
                        {{ node.rangeMin }}-{{ node.rangeMax }}
                </span>
                <div class="remove-node" (click)="deleteNode(node.name)">
                    &times;
                </div>
            </li>
        </ul>
    </div>

</div>

И nodetree.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nodetree',
  templateUrl: './nodetree.component.html',
  styleUrls: ['./nodetree.component.scss']
})
export class NodetreeComponent implements OnInit {
  nodes: Node[];
  nodeName: string;
  nodeChildren: Node[];
  nodeRangeMin: number;
  nodeRangeMax: number;
  nodeChildNumber: number;


  constructor() { }

  ngOnInit() {
    this.nodeName = '';
    this.nodeRangeMin = undefined;
    this.nodeRangeMax = undefined;
    this.nodeChildren = [];
    this.nodeChildNumber = undefined;
    this.nodes = [
      {
          name: 'Root',
          rangeMin: 12,
          rangeMax: 20,
          childNumber: undefined,
          editing: false,
          hasChildren: true,
          showChildren: true,
          children:[
            {
              name: 'Bob',
              rangeMin: 17,
              rangeMax: 30,
              childNumber: undefined,
              editing: false,
              hasChildren: true,
              showChildren: true,
              children:[]
            },
                {
                  name: '',
                  rangeMin: undefined,
                  rangeMax: undefined,
                  childNumber: undefined,
                  editing: false,
                  hasChildren: false,
                  showChildren: true,
                  children:[]
                },



        ]
      }
    ]
  }
  addNode(): void {
    // if(this.nodeName.trim().length === 0) {
    //   return;
    // }



    var nodeRangeMin = undefined,
    nodeRangeMax = undefined,
    nodeChildNumber= undefined,

    nodeName = [];

    var nodeName = [];
    while(nodeName.length < nodeChildNumber){
        var r = Math.floor(Math.random()*(nodeRangeMax - nodeRangeMin) + nodeRangeMin);
        if(nodeName.indexOf(r) === -1) nodeName.push(r);
        return;
    }

    this.nodes.push({
      name: this.nodeName,
      rangeMin: this.nodeRangeMin,
      rangeMax: this.nodeRangeMax, 
      childNumber: this.nodeChildNumber,
      editing: false,
      hasChildren: false,
      showChildren: false,
      children:[]
      })

      this.nodeName = '';
      this.nodeRangeMin = undefined;
      this.nodeRangeMax = undefined;
      this.nodeChildNumber = undefined;
  }

  deleteNode(name: string): void {
    this.nodes = this.nodes.filter(node => node.name !== name);
  }

  editNode(node: Node): void {
    node.editing = true;
  }

  editDone(node: Node): void {
    node.editing = false;
  }

  toggleChild(node: Node) {
    node.showChildren = !node.showChildren;
  }
}

interface Node {
  name: string;
  rangeMin: number,
  rangeMax: number,
  childNumber: number,
  editing: boolean;
  hasChildren: boolean;
  showChildren: boolean;
  children: Node[];

}

Answer 1

Исходя из нашего разговора, вам нужно следующее решение.

Вот рабочий блиц

Подведем итоги того, что вы пытаетесь сделать.

У вас будет один root и вы создадите children с данными name numberOfChildren rangeMin и rangeMax. У этого ребенка будет столько же детей, сколько numberOfChildren, чьи имена будут определены случайным образом между rangeMin и rangeMax.

Давайте создадим ChildComponent

child.component.ts

export type ChildModel = {
  name: string;
  rangeMin: number;
  rangeMax: number;
  children: number[];
};

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() model: ChildModel;

  constructor() { }

  ngOnInit() {
  }

}

child.component.html

<ng-container *ngIf="model">
  <span>
    > {{ model.name }}
  </span> 
  <span class="node-range">
    {{ model.rangeMin }}-{{ model.rangeMax }}
  </span>

  <ul>
    <li *ngFor="let child of model.children">
      {{child}}
    </li>
  </ul>

</ng-container>

А вот и

parent.component

@Component({
  selector: 'app-parent',
  template: `

     <div class= "input-div">
        <input type="text" class= "node-input" placeholder ="Enter a Name" [(ngModel)]="nodeName" 
        (keyup.enter)="addNode()">
        <input type="number" class= "node-input" placeholder ="Number of Children" [(ngModel)]="nodeChildren" 
        (keyup.enter)="addNode()">
        <input type="number" class= "node-input" placeholder ="Range Minimum" [(ngModel)]="nodeRangeMin" 
        (keyup.enter)="addNode()">
        <input type="number" class= "node-input" placeholder ="Range Maximum" [(ngModel)]="nodeRangeMax" 
        (keyup.enter)="addNode()">
    </div>

    <app-child *ngFor="let child of children" [model]="child"></app-child>
  `
})
export class ParentComponent implements OnInit {

  children: ChildModel[] = [];

  nodeName = '';
  nodeChildren = 0;
  nodeRangeMin = 0;
  nodeRangeMax = 0;

  constructor() { }

  ngOnInit() {
  }

  addNode() {
    this.children.push({
      name: this.nodeName,
      rangeMin: this.nodeRangeMin,
      rangeMax: this.nodeRangeMax,
      children: this.generateChildren()
    });
    this.clearInputs();
  }

  private generateChildren() {
    return [...new Array(this.nodeChildren).fill(0)].map(_ => this.getRandom());
  }

  getRandom() {
    return Math.floor(Math.random()*(this.nodeRangeMax - this.nodeRangeMin) + this.nodeRangeMin);
  }

  clearInputs() {
    this.nodeName = '';
    this.nodeChildren = 0;
    this.nodeRangeMin = 0;
    this.nodeRangeMax = 0;
  }
}