Angular 2删除子组件中数组的所选项目

Question

我有一个元素数组，每个数组项都有一个“删除”链接，单击该链接，我希望删除所选数组项。 我已经将对象推入数组并能够获取数据。

下面提到了我正在使用的代码。

子组件

@Component({
  selector: 'child',
  template: `
    <div>
      {{element.name}}
      <span (click)="deleteElement()">Delete</span>
    </div>
  `
})
export class ChildComponent {
  @Input()
  element: any;
  @Output()
  elementDeleted: EventEmitter<any> = new EventEmitter();

  deleteElement() {
    this.elementDeleted.emit();
  }
}

我的父母组件

@Component({
  selector: 'child',
  template: `
    <div>
      <child *ngFor="let element of elements; let i= index;" [element]="element" (elementDeleted)="onElementDeleted(element)">
      </child>
    </div>
  `
})
export class ParentComponent {
  constructor() {
    this.elements = [
      { name: 'element1' },
      { name: 'element2' },
      (...)
    ];
  }

  onElementDeleted(element) {
    var index = this.elements.findIndex((elt) => (elt===element));
    if (index != -1) {
      this.elements.splice(index, 1);
    }
  }

现在，每次删除数组的最后一项而不是删除选定的项时。 如果我单击第0或1st索引的Delete链接，则仍删除最后一项。 我不确定我要去哪里错。

Answer 1

编辑：好的，您也可以这样：

您需要传递要删除的元素，以便删除正确的元素。 因此，请稍微更改您的代码，然后在delete中传递元素。

<div>
  {{element.name}}
  <span (click)="deleteElement(element)">Delete</span> 
</div>

并使您的发射通过要删除的元素：

deleteElement(element) {
  this.elementDeleted.emit(element);
}

然后删除元素：

onElementDeleted(element) {
  let index = this.elements.indexOf(element);
  this.elements.splice(index, 1);
}

正如Daniel所提到的， #已被弃用，请改用let 。

Answer 2

请更新您的Angular2版本。 这里的问题可能出在删除语法*ngFor=#element of elements ，其中#element在赋值后发生变化，因此在每种情况下（模板全局范围），您都会从列表中获得最后一个元素。 新语法为*ngFor="let element of elements" ，并且效果很好。 柱塞： https ：//plnkr.co/edit/OsxUS3V5pB3Tqko5SojJ ？ p = preview