从索引值 Angular 中的数组中删除项目

Question

可能很简单，但是，我试图从 Angular 中的对象数组中删除项目，但我当前的代码只有 returns 一个 undefined控制台，因为我确定它找不到正确的索引值。它也适用于 Kendo 网格。所以我需要根据用户点击的内容来拼接，而不是特定的id。 Link 演示：https://stackblitz.com/edit/angular-fl5jde-xbsuno

数据结构为：

export const data = [
  {
    id: 1,
    name: "Element 1"
  },
{
    id: 2,
    name: "Element 2"
  },
{
    id: 3,
    name: "Element 3"
  },
];

ts 文件

  public gridData: any[] = data;

  public removeItem(id) {
    let index = data.findIndex(e => e.id === id);
    if (index !== -1) {
      data.splice(index, 1);
    }
    console.log(id)
  }

Answer 1

您可以使用过滤器，这是一种 JavaScript 方法：

  public removeItem(id) {
    this.gridData = this.gridData.filter(el => el.id != id)
    console.log(this.gridData)
  }

查看 documentation for filter

查看 Live demo

Answer 2

实际问题是您没有向 removeItem 传递任何内容。所以，在你的 html 中，我只是写了 removeItem(dataItem) 而不是 removeItem(id)。在 ts 中，变化是 let index = data.findIndex(e => e.id === dataItem.id);.

请检查更新后的https://stackblitz.com/edit/angular-fl5jde-3pb7ef?file=app/app.component.ts

Answer 3

你需要传递数据项，像这样：

<button
   kendoButton
   look="flat"
   [icon]="'delete'"
   (click)="removeItem(dataItem)"
 >
</button>

然后从this.gridData中删除。

.ts

 public removeItem({id}) {
    this.gridData = data.filter(e => e.id !== id);
  }

从索引值 Angular 中的数组中删除项目

Delete Item from Array in Angular at Index value

kendo-grid

kendo-ui-angular2

angular