Angular 2删除子组件中数组的选定项答案

【问题标题】：Angular 2 deleting of selected item of an array in Child componentAngular 2删除子组件中数组的选定项
【发布时间】：2017-02-01 16:37:04
【问题描述】：

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

我正在使用的代码如下所述。

子组件-

@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 个或第 1 个索引的删除链接，最后一个项目仍然被删除。我不确定我哪里出错了。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

编辑：好吧，你也可以这样做：

您需要传递要删除的元素，以便删除正确的元素。所以稍微修改一下你的代码，下面在你的删除中传递元素。

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

并让你的 emit 传递要删除的元素：

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

然后删除元素：

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

正如丹尼尔所说，# 已被弃用，请改用let。

【讨论】：

我也在看这个，我可以说流程是正确的并且是这样工作的：(click)="deleteElement()" -> this.elementDeleted.emit() -> (elementDeleted)="onElementDeleted(element)"，所以这绝对不是这个问题。
是的，我只是没有在我的回答中提到# :D 我什至没有想过这样做，嗯，现在有两种选择。没想到 # 和 let 很重要，而且 # 仍然会被支持，显然不是:)
*ngFor 中使用的全局范围的# 模板可能存在太多问题（比如这个问题），它已被删除，现在使用它会引发错误。
是的，我实际测试过，发现是这样:)
我在想如果我在 *ngFor 中声明的另一个变量 i 正在造成问题。稍微更新了我的代码。

【解决方案2】：

请更新您的 Angular2 版本。这里的问题可能在于删除的语法*ngFor=#element of elements，其中#element 在分配后发生变化，因此您在每种情况下都从列表中获取最后一个元素（模板全局范围）。新语法是*ngFor="let element of elements"，它工作正常。笨蛋：https://plnkr.co/edit/OsxUS3V5pB3Tqko5SojJ?p=preview

【讨论】：

+1 你的回答在问题方面肯定更中肯，但我想我会把我的答案留在这里，只是为了换个角度，如果不是别的的话：P
更改了 # 让仍然面临同样的问题。
你用的是哪个A2版本？
@angular/compiler-cli : 2.3.1 根据我的包 json