角2ネストされた構造を作成するにはどうすればよいですか？

Question

私は一連の式を持っています。条件セットを選択すると、これがネストされた新しい式ラインを作成します。私は、オブジェクトのオブジェクトとしてこれを作成しました：このConditionSetが選択されている場合

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

は、だから私は、「移動」またはExpression.childrenにこれを複製します。今ならば、それは以下のように見えるものを追加することによって、I console.log this.expressions：

をしかし、あなたは中央の選択ボックスがネストされている参照してarrivalDateは、このようなconditionSet.childrenで入れ子にする必要がありますように：

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

また、ネストされたコンテンツを作成するには、ネストされたaddButtonも.childrenにプッシュする必要があります。

私はこのように考えていたが、これは:(動作しません。

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

誰かがこの上で私を助けることができ、私は本当にこの問題に必死に取得しています

ここPLUNKERです。

Answer 1

実際にはあなただけExpressionBuilderComponent一つに、あなたのExpressionComponentクラスに定義されたaddExpression方法を持っていません。あなたが最初のレベルのみのために式を追加することができますので...

また、データの再帰的な側面を正しく管理していないと思います。

ExpressionBuilderComponentコンポーネントについて、あなたはexpressionコンポーネントのexpressionsパラメータのexpresion.childrenアレイを提供する必要があります。

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

同じことが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> 

参照してください。このplunkr：https://plnkr.co/edit/zGcoZD?p=preview。

編集

削除についてあなたが親の子から要素を削除する必要があるため、あなたはそれを行うためにカスタムイベント（@Ouput）を処理する必要があります。

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

とコンポーネントで：https://plnkr.co/edit/rQCILc?p=preview：

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

削除のために、このplunkrを参照してください。