Angular 2 Jak utworzyć strukturę zagnieżdżoną?

Question

Mam zestaw wyrażeń, a zestaw warunkowy po wybraniu tego zostanie utworzony nowy wiersz Wyrażenie, ten jest zagnieżdżony. Stworzyłem tego obiektu jako obiektu:

export class Expression { 
    selector: string; 
    constraint: string; 
    value: string; 
    children: Expression[]; 
} 

Więc po wybraniu tej ConditionSet Chcę „przenieść” lub powielać to Expression.children. Teraz gdybym console.log this.expressions dodając jedną to wygląda w następujący sposób:

Ale jak widać środkowe pole zaznaczania jest zagnieżdżona i arrivalDate musi być zagnieżdżone w conditionSet.children jak ten:

Expression { 
selector: "conditionSet", 
value:"" 
children: 
      selector:"ArrivalDate", 
      value:"" 
} 

A zagnieżdżony addButton musi również przekazać go do .children, aby utworzyć zagnieżdżoną zawartość.

myślałem w ten sposób, ale to nie działa :(.

if(this.expression.selector === 'conditionSet'){ 
      this.prototypes = this.prototypes.children; 
      console.log(this.prototypes); 
     } 

Czy ktoś mógłby mi pomóc w tej sprawie, jestem naprawdę zdesperowany w tej sprawie

Oto PLUNKER

Answer 1

w rzeczywistości nie masz metoda addExpression zdefiniowane w klasie ExpressionComponent, tylko w jednym ExpressionBuilderComponent. Więc można dodać tylko wyraz na pierwszym poziomie ...

Ponadto uważam, że nie zarządzasz poprawnie rekurencyjnym aspektem danych.

Dla składnika ExpressionBuilderComponent, trzeba podać tablicę expresion.children dla parametru expression komponentu expressions:

<expression *ngFor="#expression of expressions" [prototypes]="prototypes" [expression]="expression" [expressions]="expression.children"></expression> 
<button class="btn btn-primary" (click)="addExpression()">Add Expression</button> 

To samo trzeba zrobić dla siebie ExpressionComponent:

<div class="col-xs-3"> 
    <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()"> 
    <option *ngFor="#p of prototypes" [value]="p.selector"> 
     {{ p.selectorName }} 
    </option> 
    </select> 
</div> 

<div *ngIf="prototype?.valueType === 'Set'"> 
    <div [ngClass]="{'nested-expression': prototype?.valueType === 'Set'}"> 
    <expression *ngFor="#expression of expressions" [prototypes]="prototypes" [expression]="expression" [expressions]="expression.children"></expression> 
    <button class="btn btn-primary" (click)="addExpression()">Add Expression</button> 
    </div> 
</div> 

Apostolskiej ten plunkr: https://plnkr.co/edit/zGcoZD?p=preview.

Edit

Odnośnie usunięcia, trzeba obsłużyć zdarzenia niestandardowego (@Ouput), aby to zrobić, ponieważ trzeba usunąć element z dziećmi dominującej:

<div class="col-xs-1"> 
    <button class="btn btn-danger pull-right" (click)="deleteExpression()">Delete</button> 
</div> 

<div *ngIf="prototype?.valueType === 'Set'"> 
    <div [ngClass]="{'nested-expression': prototype?.valueType === 'Set'}"> 
    <expression *ngFor="#expression of expressions" 
      [prototypes]="prototypes" 
      [expression]="expression" 
      [expressions]="expression.children" 
      (expressionDeleted)="onExpressionDeleted(expression)"> 
    </expression> 
    <button class="btn btn-primary" (click)="addExpression()">Add Expression</button> 
    </div> 
    <div>{{expression | json}}</div> 
</div> 

i w części:

export class ExpressionComponent implements OnInit { 
    (...) 
    @Output() expressionDeleted: EventEmitter = new EventEmitter; 

    (...) 

    deleteExpression() { 
    this.expressionDeleted.emit(); 
    } 

    onExpressionDeleted(expression) { 
    var index = this.expressions.indexOf(this.expression); 
    this.expressions.splice(index, 1); 
    console.log(index); 
    } 
} 

Zobacz ten plunkr usunięcia: https://plnkr.co/edit/rQCILc?p=preview.