角度从数组中删除 obj 数据（方法问题）答案

【问题标题】：Angular delete obj data from array (issue with method)角度从数组中删除 obj 数据（方法问题）
【发布时间】：2020-11-18 22:06:45
【问题描述】：

我的 Angular 应用中有一些数据。

这是数据：

在 app.component.ts 我有：

myarr = [
    {
        name: 'mark',
        address: 'something'
    },
    {
        name: 'paul',
        address: 'somethingelse'
    },

];

那我有方法了。

deleteFromArray(index) {
    delete this.myarr[index];
}

在我的 app.component.html 中，我得到了：

<table>
    <tr *ngFor="let data of myarr; let i = index">
      <td>{{ data.name }}</td>
      <td>{{ data.address }}</td>
      <td>
        <button (click)="deleteFromArray(i)">Delete</button>
      </td>
    </tr>
</table>

删除方法的问题是它正在返回：

ERROR TypeError: Cannot read property 'name' of undefined

当我删除一个项目时会发生这种情况。

我该如何解决这个问题？

【问题讨论】：

您可以改为使用splice() 来修改数组：this.myarr.splice(index, 1) - 这会删除位置index 的一个元素。另一方面，delete 用于删除对象的特定属性。例如。 delete this.myarr[index].address。这将删除位于index 位置的对象的address 属性。
stackoverflow.com/a/64892892/10094636

标签： angular typescript angular10

【解决方案1】：

试试这个...

 import { Component } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      name = 'Angular';
      myarr = [
        {
          name: 'mark',
          address: 'something'
        },
        {
          name: 'paul',
          address: 'somethingelse'
        },
    
      ];
      deleteFromArray(key) {
        let index = this.myarr.findIndex(d => d === key); 
        this.myarr.splice(index, 1);
        console.log(this.myarr)
      }
    }

演示：https://stackblitz.com/edit/angular-9sif72?file=src/app/app.component.ts

【讨论】：

【解决方案2】：

试试这个

this.myarr.splice(index, 1);

【讨论】：

由于某种原因，拼接并没有删除我单击的选定项目，而是列表中的最后一个

【解决方案3】：

我会像这样使用Array.filter 函数：

deleteFromArray(idx: number) {
   this.myarr = this.myarr.filter((element, index) => index !== idx);
}

您还可以按任何属性过滤集合，而不仅仅是索引

【讨论】：