Angular 2 Come si crea una struttura nidificata?

Question

Possiedo un set di espressioni e un ConditionSet quando si seleziona quello in cui verrà creata una nuova riga Expression, questa è nidificata. Ho creato questo oggetto come oggetto:

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

Così, quando viene selezionata questa ConditionSet voglio "muoversi" o duplicare questo per Expression.children. Ora, se io console.log this.expressions con l'aggiunta di uno Sembra come segue:

Ma, come si vede la casella di selezione centrale è annidata e l'arrivalDate deve essere annidati nei conditionSet.children come questo:

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

E l'addButton nidificato deve anche inviarlo allo .children per creare il contenuto nidificato.

stavo pensando in questo modo, ma questo non funziona :(:.

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

Qualcuno può darmi una mano su questo, sono davvero diventando disperata su questo tema

Ecco un PLUNKER

Answer 1

in realtà non è necessario il metodo addExpression definito nella tua classe ExpressionComponent, solo nel ExpressionBuilderComponent uno. Così si può aggiungere solo espressione per il primo livello ...

Inoltre, penso che tu non gestisci correttamente l'aspetto ricorsivo dei tuoi dati.

Per il componente ExpressionBuilderComponent, è necessario fornire la matrice expresion.children per il parametro expressions del expression componente:

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

Lo stesso deve essere fatto per il ExpressionComponent sé:

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

See questo plunkr: https://plnkr.co/edit/zGcoZD?p=preview.

Modifica

Per quanto riguarda l'eliminazione, è necessario gestire un evento personalizzato (@Ouput) per farlo in quanto è necessario per rimuovere l'elemento dai bambini della controllante:

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

e nella componente:

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); 
    } 
} 

Vai a questa plunkr per l'eliminazione: https://plnkr.co/edit/rQCILc?p=preview.