typescript - Angular 2 Hvordan lager jeg en nestet struktur?

Jeg har et sett med uttrykk, og et ConditionSet når du velger det vil det opprettes en ny uttrykkslinje, denne er nestet. Jeg opprettet dette som objekt objekt:

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

Så når dette ConditionSet er valgt, vil jeg "flytte" eller duplisere dette til Expression.children. Nå, hvis jeg console.log dette.expressions ved å legge til en, ser det slik ut:

Men som du ser, er den midterste valgboksen nestet, og arrivalDate må være nestet i conditionSet.children slik:

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

Og den nestede addButton må også trykke den til .children for å lage det nestede innholdet.

Jeg tenkte på denne måten, men dette fungerer ikke :(:

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

Kan noen hjelpe meg med dette, jeg begynner virkelig å bli desperat over dette problemet.

Her er en PLUNKER

Svar #1

Faktisk har du ikke addExpression-metoden definert i din ExpressionComponent-klasse, bare i ExpressionBuilderComponent-klassen. Så du kan bare legge til uttrykk på første nivå...

Dessuten synes jeg at du ikke håndterer den rekursive delen av dataene dine korrekt.

For ExpressionBuilderComponent-komponenten må du gi expresion.children-arrayet for expressions-parameteren til expression-komponenten:

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

Det samme må gjøres for ExpressionComponent selv:

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

Se denne plunkr: https://plnkr.co/edit/zGcoZD?p=preview.

Rediger

Når det gjelder sletting, må du håndtere en egendefinert hendelse (@Ouput) for å gjøre det siden du må fjerne elementet fra barnene til forelderen:

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

og i komponenten:

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

Se denne plunkren for sletting: https://plnkr.co/edit/rQCILc?p=preview.

Relaterte artikler