Saya sedang menulis aplikasi pohon simpul sederhana yang mengambil input dan saya mengalami kesulitan menampilkan anak-anak yang dibuat melalui input. Tujuan keseluruhannya adalah untuk mencetak jumlah anak yang diketik ke input dan semua anak berada dalam rentang yang dimasukkan ke input juga. Saya dapat mencetak simpul baru dengan jelas tetapi logika saya tidak berfungsi sebagai anak dari "root" dan jumlah anak juga tidak dicetak. Tolong bantu. Bimbingan apa pun akan sangat membantu dan dihargai. Saya baru mengenal Angular. Apa yang saya lewatkan?

Inilah yang saya miliki:

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>

Dan 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[];

}
1
Nick Halloway 9 Maret 2020, 21:42

1 menjawab

Jawaban Terbaik

Berdasarkan percakapan kami, solusi berikut adalah yang Anda butuhkan.

Ini adalah blitz yang berfungsi

Mari kita simpulkan apa yang Anda coba lakukan.

Anda akan memiliki satu root dan membuat children dengan name numberOfChildren rangeMin dan rangeMax yang diberikan. Anak ini akan memiliki anak sebanyak numberOfChildren yang namanya akan ditentukan secara acak antara rangeMin dan rangeMax.

Mari buat 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>

Dan inilah

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;
  }
}
1
Bunyamin Coskuner 9 Maret 2020, 21:32