typescript Angular 2 我不知道如何删除一行推送的对象

Angular 2 I don't know how to delete a row of a pushed Object

提问by Sireini

First let me be clear about my problem/issue:

首先让我清楚我的问题/问题：

First it was like this: https://www.dropbox.com/s/92z2oe7f4w5x2b5/conditions.jpg?dl=0Here it deletes the last created Object in my case Conditions.

首先是这样的：https: //www.dropbox.com/s/92z2oe7f4w5x2b5/conditions.jpg?dl=0在我的情况下，它删除最后创建的对象条件。

but i want to delete each condition separately like this see the red box next to each row: https://www.dropbox.com/s/ptwq6sk6da4p21k/new.jpg?dl=0

但我想像这样单独删除每个条件，请参阅每行旁边的红色框：https: //www.dropbox.com/s/ptwq6sk6da4p21k/new.jpg?dl=0

import {Component, OnInit, DynamicComponentLoader, Input} from 'angular2/core';
import {Condition}    from './condition';

import {DateCondition}    from './datecondition.component';
import {StringCondition}    from './stringcondition.component';
import {SelectCondition}    from './selectcondition.component';
import {ConditionDetailComponent}    from './conditiondetail.component';

import {ConditionService} from './condition.service'

@Component({
    selector: 'condition-builder',
    templateUrl: 'app/conditionbuilder.component.html',
    directives: [ConditionDetailComponent],
})

export class ConditionBuilderComponent implements OnInit {
    conditions: Condition[] = [];
    catalog: Condition[] = [];

constructor(public _conditionService: ConditionService) { }

getConditions() {
    this._conditionService.getConditions().then(conditions => this.catalog = conditions);
}

ngOnInit() {
    this.getConditions();
}

onChange(conditionsIndex, selectedCondition:string): void {
    this.conditions[conditionsIndex] = this.catalog.find(condition => condition.name == selectedCondition);
}

newCondition() {
    this.conditions.push(this.catalog[0]);
}

deleteCondition() {
    this.conditions.pop();
}
}

In the code above i'll import the getConditions with the object of conditions in my case. Does any one know how i do this and what is the best way to handle this issue?

在上面的代码中，在我的例子中，我将使用条件对象导入 getConditions。有谁知道我是如何做到这一点的，以及处理这个问题的最佳方法是什么？

Here i want to

我想在这里

import {Component, OnInit, Input, DynamicComponentLoader, ElementRef} from 'angular2/core';

import {Condition}    from './condition';

import {DateCondition}    from './datecondition.component';
import {StringCondition}    from './stringcondition.component';
import {SelectCondition}    from './selectcondition.component';
import {ConditionBuilderComponent} from "./conditionbuilder.component";

@Component({
    selector: 'condition-detail',
    template: '<div #child></div>'
    + '<a class="btn btn-danger" (click)="deleteCondition()"><i class="glyphicon glyphicon-minus"></i></a>'
})

export class ConditionDetailComponent implements OnInit  {
    @Input() condition: Condition;

    dcl:DynamicComponentLoader;
    elementRef:ElementRef;

    constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
        this.dcl = dcl;
        this.elementRef = elementRef;
    }

    ngOnInit() {
        this.dcl.loadIntoLocation(this.condition, this.elementRef, 'child');
    }

   deleteCondition() {
    HOW CAN I DELETE THE CONDITION ROW HERE?
}

Like this is the code build, ill hope it is clear for you to help me out. How does the deleteCondition method know which row he needs to deleten and how do i delete it out of the array in the code above the page?

就像这是代码构建，我希望你能帮我弄清楚。deleteCondition 方法如何知道他需要删除哪一行，以及如何将其从页面上方代码中的数组中删除？

Ill hope someone can help me out!!

希望有人能帮帮我！！

回答by Thierry Templier

You could provide the list to the sub component and remove the current element from it. This way the associated component in the loop will be removed.

您可以向子组件提供列表并从中删除当前元素。这样，循环中的关联组件将被删除。

• The main component:

  @Component({
    selector: 'my-app',
    template: `
      <div *ngFor="#elt of data">
        <my-component [elt]="elt" [data]="data"></my-component>
      </div>
    `,
    directives: [MyComponent]
  })
  export class AppComponent {
    constructor() {
      this.data = [
        {name: 'name1'},
        {name: 'name2'},
        {name: 'name3'},
        {name: 'name4'}
      ];
    }
  }
  

• The child component:

  @Component({
    selector: 'my-component',
    template: `
      <div>{{elt.name}} <span (click)="delete()">X</span></div>
    `
  })
  export class MyComponent {
    @Input()
    elt: any;
  
    @Input()
    data: any[];
  
    delete() {
      var index = this.data.indexOf(this.elt);
      this.data.splice(index, 1);
    }
  }
  

• 主要成分：

  @Component({
    selector: 'my-app',
    template: `
      <div *ngFor="#elt of data">
        <my-component [elt]="elt" [data]="data"></my-component>
      </div>
    `,
    directives: [MyComponent]
  })
  export class AppComponent {
    constructor() {
      this.data = [
        {name: 'name1'},
        {name: 'name2'},
        {name: 'name3'},
        {name: 'name4'}
      ];
    }
  }
  

• 子组件：

  @Component({
    selector: 'my-component',
    template: `
      <div>{{elt.name}} <span (click)="delete()">X</span></div>
    `
  })
  export class MyComponent {
    @Input()
    elt: any;
  
    @Input()
    data: any[];
  
    delete() {
      var index = this.data.indexOf(this.elt);
      this.data.splice(index, 1);
    }
  }
  

See this plunkr: https://plnkr.co/edit/o5O0Rr?p=preview.

请参阅此 plunkr：https://plnkr.co/edit/o5O0Rr ?p =preview 。