Angular 2创建嵌套对象

Question

我有2个组件，一个ExpressionBuilderComponent：

@Component({
    selector: 'expression-builder',
    directives: [ExpressionComponent],
    template: `
        <div class="container">
           <expression *ngFor="#expression of expressions" [prototypes]="prototypes" [expression]="expression" [expressions]="expressions"></expression>
           <a class="btn btn-primary" (click)="addExpression()"><i class="glyphicon glyphicon-plus"></i></a>
        </div>
    `
})

ExpressionComponent：

@Component({
    selector: 'expression',
    directives: [ExpressionComponent],
    template: `
    <div class="row">

    <!-- First Select -->
        <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>

    <!-- Second Select -->
        <div [ngClass]="{'col-xs-3': prototype?.valueType !== 'Set', 'col-xs-2': prototype?.valueType === 'Set'}" *ngIf="prototype">
            <select class="form-control" [(ngModel)]="expression.constraint">
                <option *ngFor="#constraint of prototype.constraints" [value]="constraint">
                    {{ constraint }}
                </option>
            </select>
        </div>

    <!-- Third Select -->
        <div [ngClass]="{'col-xs-3': prototype?.valueType !== 'Set', 'col-xs-2': prototype?.valueType === 'Set'}">
            <input *ngIf="expression && prototype?.valueType === 'Integer'" class="form-control" [(ngModel)]="expression.value" />
        </div>

        <div class="col-xs-1">
            <a class="btn btn-danger pull-right" (click)="deleteExpression()"><i class="glyphicon glyphicon-remove"></i></a>
        </div>

        <!-- Expression Set selector -->
        <div *ngIf="prototype?.valueType === 'Set'">
           <expression [prototypes]="prototypes" [expression]="expression"></expression>
               <a class="btn btn-primary" (click)="addExpression()"><i class="glyphicon glyphicon-plus"></i></a>
            </div>
       </div>
   })

export class ExpressionComponent implements OnInit {
   @Input() expression:Expression;
   @Input() expressions:any[];
   @Input() prototype:ExpressionPrototype;
   @Input() prototypes:ExpressionPrototype[];
    ngOnInit() {

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

 addExpression() {
        this.expressions.push(new Expression());
        console.log(this.expressions);
    }

这些是对象：

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

export class ExpressionPrototype {
    selector: string;
    selectorName: string;
    constraints: any[] = [];
    valueType: string;
}

如何将所有原型移动到expression.children，以便它成为嵌套内容，现在当我选择某些内容时它会相互覆盖，因为它们具有相同的变量来绑定数据。对于addExpression，它必须在嵌套内容中。我将在屏幕截图中向您展示我的意思，或许它有点模糊：

我希望你有足够的信息：）

这是PLUNKER