Angular 从数组中删除对象数据（方法有问题）

Question

我的 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

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

我该如何解决这个问题？

Answer 1

试试这个

this.myarr.splice(index, 1);

Answer 2

试试这个...

 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

Answer 3

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

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

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

Angular 从数组中删除对象数据（方法有问题）

Angular delete obj data from array (issue with method)

typescript

angular

angular10