Angular 从阵列中删除obj角度数据（方法问题）

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

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

如何修复此问题？

试试这个

this.myarr.splice(index, 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)
      }
    }

---

演示：

我会使用

数组来完成。过滤器

功能如下：

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

---

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

。您可以改为使用

splice（）

在适当的位置修改数组：

this.myarr.splice（index，1）

-这将在

索引

位置删除一个元素<另一方面，代码>删除用于删除对象的特定属性。例如，

删除这个.myarr[index].address

。这将删除位置

索引

中对象的

地址

属性。出于某种原因，使用splice时，它不会删除我单击的选定项目，而是删除列表上的最后一个项目

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