Javascript从数组中删除对象而不删除选定的

我使用Angular 5创建了一个函数，用于从数组中删除对象：

以下是数据：

this.widgets = [
   { id: 1, title: 'Object 1', config: { row: 1, col: 1, sizex: 1 }}
   { id: 2, title: 'Object 2', config: { row: 1, col: 2, sizex: 1 }}
];

下面是函数：

removeObj(id) {
  this.widgets.splice( this.widgets.indexOf(id), 1 );
}

这是我拥有的组件的html部分：

<div *ngFor="let widget of widgets" [(ngWidget)]="widget.config">
    <button (click)="removeObj(widget.id)">X</button>
    <div class="title">{{widget.title}}</div>
    <p>{{widget.id}}</p>
</div>

X
{{widget.title}
{{widget.id}

我需要它做的只是移除选中的对象，而只是移除第一个对象

如何解决此问题？

尝试使用array.prototype.filter：

试试这个

  removeObj(id) {
  let index = this.widgets.findIndex(function (o) {
            return o.id === id;
        })
  this.widgets.splice(index, 1);
  }

---

在

removeObj

函数中，必须搜索参数中传递的id。您不能仅使用

indexOf

获取索引

removeObj(id) {
   var index = -1;
   this.widgets.forEach((widget, i) => {
        if(widget.id === id) {
            index= i;
            return;
        }
   });
   this.widgets.splice( this.widgets.indexOf(index), 1 );
}

---

您还可以尝试以下一行代码

delete this.widgets[this.widget.indexOf(id)];

---

ID是对象属性，而不是数组索引。您可以这样做：

<div *ngFor="let widget of widgets; let i = index" [(ngWidget)]="widget.config">
    <button (click)="removeObj(i)">X</button>
    <div class="title">{{widget.title}}</div>
    <p>{{widget.id}}</p>
</div>

X
{{widget.title}
{{widget.id}

在拼接之前尝试映射阵列：

removeObj(id) {
   widgets.splice((widgets.map(o => o.id)).indexOf(id) , 1);
}

---

this.widget.indexOf（id）

这一行的结果是什么？它返回给定id的基于0的索引，对应于他在数组中的位置。请看一下：您可以使用

findIndex

而不是使用

循环

removeObj(id) {
   widgets.splice((widgets.map(o => o.id)).indexOf(id) , 1);
}