如何在Angular中推动儿童

Question

我正在编写一个接受输入的简单节点树应用程序，并且在显示通过输入创建的子级时遇到问题。总体目标是打印输入中键入的子项的数量，以及输入中包含的范围内的所有子项。很明显，我可以打印一个新节点，但我的逻辑作为"根"的子节点不起作用，子节点的数量也不打印。请帮忙。任何指导都将是非常有用和值得赞赏的。我是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>

节点树组件的

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，并使用给定的namenumberOfChildrenrangeMin和rangeMax创建children。这个孩子将有和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;
}
}