Angular 如何让孩子们有棱角

我正在编写一个简单的节点树应用程序，它接受输入，但在显示通过输入创建的子节点时遇到了问题。总体目标是打印输入的子项数量以及输入范围内的所有子项。显然，我可以打印一个新节点，但我的逻辑不能作为“root”的子节点工作，并且子节点的数量也不能打印。请帮忙。任何指导都将是真正有帮助和感激的。我是个新手。我错过了什么

以下是我所拥有的：

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>

>{{node.name}
{{node.rangeMin}-{{node.rangeMax}
&时代；

以及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[];

}

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“nodetree”，
templateUrl:'./nodetree.component.html'，
样式URL:['./nodetree.component.scss']
})
导出类NodetreeComponent实现OnInit{
节点：节点[]；
nodeName：字符串；
节点子节点：节点[]；
nodeRangeMin：数字；
nodeRangeMax：编号；
nodeChildNumber：编号；
构造函数（）{}
恩戈尼尼特（）{
this.nodeName=''；
this.nodeRangeMin=未定义；
this.nodeRangeMax=未定义；
this.nodeChildren=[]；
this.nodeChildNumber=未定义；
此节点数=[
{
名称：'根'，
rangeMin:12，
最大范围：20，
childNumber:未定义，
编辑：错，
有孩子：是的，
孩子们：没错，
儿童：[
{
姓名：'鲍勃'，
兰明：17，
最大范围：30，
childNumber:未定义，
编辑：错，
有孩子：是的，
孩子们：没错，
儿童：[]
},
{
名称：“”，
rangeMin：未定义，
rangeMax:未定义，
childNumber:未定义，
编辑：错，
有孩子：错，
孩子们：没错，
儿童：[]
},
]
}
]
}
addNode（）：void{
//if（this.nodeName.trim（）.length==0）{
//返回；
// }
var NODERAGEMIN=未定义，
nodeRangeMax=未定义，
nodeChildNumber=未定义，
nodeName=[]；
变量nodeName=[]；
while（nodeName.lengthnode.name！==name）；
}
editNode（节点：节点）：无效{
node.editing=true；
}
editDone（节点：节点）：无效{
node.editing=false；
}
toggleChild（节点：节点）{
node.showChildren=！node.showChildren；
}
}
接口节点{
名称：字符串；
rangeMin:号码，
rangeMax:number，
childNumber:number，
编辑：布尔；
hasChildren：布尔型；
showChildren：布尔；
子节点：节点[]；
}

根据我们的对话，以下解决方案正是您所需要的

这是一张工作票

让我们总结一下你想做什么

您将拥有一个

根目录

，并使用给定的

名称创建
子目录
numberOfChildren
rangeMin
和
rangeMax
。此子项的子项数将与
numberOfChildren
的子项数相同，其名称将在
rangeMin
和
rangeMax
之间随机确定

让我们创建一个
ChildComponent

child.component.ts

导出类型ChildModel={
名称：字符串；
rangeMin：数字；
rangeMax：数字；
儿童：人数[]；
};
@组成部分({
选择器：“应用程序子项”，
templateUrl:“./child.component.html”，
样式URL:['./child.component.css']
})
导出类ChildComponent实现OnInit{
@Input（）模型：ChildModel；
构造函数（）{}
恩戈尼尼特（）{
}
}

child.component.html


>{{model.name}
{{model.rangeMin}}-{{model.rangeMax}


{{child}}



这里是

parent.component

@组件({
选择器：“应用程序父级”，
模板：`
`
})
导出类ParentComponent实现OnInit{
子项：ChildModel[]=[]；
nodeName=''；
nodeChildren=0；
nodeRangeMin=0；
nodeRangeMax=0；
构造函数（）{}
恩戈尼尼特（）{
}
addNode（）{
这个，孩子，推({
名称：this.nodeName，
兰格明：这个，诺德兰格明，
rangeMax：这个，nodeRangeMax，
儿童：this.generateChildren（）
});
这个.clearInputs（）；
}
私生子{
return[…新数组（this.nodeChildren.fill（0）].map（=>this.getRandom（））；
}
getRandom（）{
返回Math.floor（Math.random（）*（this.nodeRangeMax-this.nodeRangeMin）+this.nodeRangeMin）；
}
clearInputs（）{
this.nodeName=''；
this.nodeChildren=0；
这个.nodeRangeMin=0；
T