Question

我希望从数组中删除一个元素，该元素可以是其键，名称或电子邮件或其他任何属性。

HTML

<tr *ngFor="let person of persons;" (click)="remove(person.key)">
  <td>{{person.key}}</td>
  <td>{{person.name}}</td>
  <td>{{person.email}}</td>
</tr>

打字稿

persons = [
{ key: 1, name: 'Mr.sohail', email: 'sohail@tee.com' },
{ key: 2, name: 'Mr.Farhan', email: 'farhan@tee.com' },
{ key: 3, name: 'Mr.Fida', email: 'fida@tee.com' },
{ key: 4, name: 'Mr.Liaqat', email: 'liaqat@tee.com' },
{ key: 5, name: 'Mr.Abdullah', email: 'abdullah@tee.com' },
{ key: 6, name: 'Mr.Ubaid', email: 'ubaid@tee.com' },
{ key: 7, name: 'Mr.Wasif', email: 'wasif@tee.com' }
]

删除方法以根据键属性删除元素但它会根据索引删除。

remove(key) {
console.log(key);
this.data.persons.splice(key, 1);
}

请告知我们所需的更改

由于

Answer 1

 removeByPropertyName(propertyName: string, value: any): void {
    let indexToRemove = persons.findIndex(p => p[propertyName] === value);
    if (indexToRemove !== -1)
        this.remove(indexToRemove);
    else
        console.log('Not found!');
 }

要按键删除，您可以将该方法用作

removeByPropertyName('key', 10);

按名称删除

removeByPropertyName('name', 'somename');

Answer 2

因为你想根据动态key从集合中删除元素（假设它应该是唯一的）。您可以考虑为remove函数传递两个参数，object和propName

<tr *ngFor="let person of persons;" (click)="remove(person,'key')">
  <td>{{person.key}}</td>
  <td>{{person.name}}</td>
  <td>{{person.email}}</td>
</tr>

remove(person, propName){
   this.persons = this.persons.filter(p => p[propName] !== person[propName])
}

Demo Here

Answer 3

使用this.persons功能。另外，我认为它应该是this.data.persons而不是remove(key) { console.log(key); this.persons= this.persons.filter(obj => obj.key !== key); }

span[@ng="league"]

Answer 4

使用过滤器怎么样？

{{1}}

Answer 5

根据您的用例，如果您在单击时尝试删除项目，则可以（并且应该）使用该索引。我认为没有理由使用房产。

以下是我如何删除索引上的项目：

<tr *ngFor="let person of persons; index as i" (click)="remove(i)">
  <td>{{person.key}}</td>
  <td>{{person.name}}</td>
  <td>{{person.email}}</td>
</tr>

remove(index) {
    this.data.persons.splice(index, 1);
}

如何使用angular中的typescript基于某些属性删除元素

5 个答案: