Angular 2如何创建嵌套结构？

Question

我有一组表达式，当你选择一个表达式时，会创建一个新的表达式行，这个表达式是嵌套的。我创建了这个对象对象：

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

因此，当选择此ConditionSet时，我想＆＃34;移动＆＃34;或者将其复制到Expression.children。现在，如果我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

事实上，您没有在addExpression课程中定义ExpressionComponent方法，只有ExpressionBuilderComponent类。所以你只能为第一级添加表达式......

此外，我认为您无法正确管理数据的递归方面。

对于ExpressionBuilderComponent组件，您需要为expresion.children组件的expressions参数提供expression数组：

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

并在组件中：

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进行删除：https://plnkr.co/edit/rQCILc?p=preview。