从Angular 2存储的数组中删除项目

Question

我想在使用TypeScript的Angular 2中从存储的数组中移除一个项目。我正在使用名为Data Service的服务，其代码如下：

export class DataService {

    private data: string[] = [];

    addData(msg: string) {
        this.data.push(msg);
    }

    getData() {
        return this.data;
    }

    deleteMsg(msg: string) {
        delete [this.data.indexOf(msg)];
    }
}

我的组件类：

import {Component} from '@angular/core'
import {LogService} from './log.service'
import {DataService} from './data.service'

@Component({
    selector: 'tests',
    template:
            `
        <div class="container">
            <h2>Testing Component</h2>
            <div class="row">
                <input type="text" placeholder="log meassage" #logo>
                <button class="btn btn-md btn-primary" (click)="logM(logo.value)">log</button>
                <button class="btn btn-md btn-success" (click)="store(logo.value)">store</button>
                <button class="btn btn-md btn-danger" (click)="send()">send</button>
                <button class="btn btn-md " (click)="show()">Show Storage</button>
                <button (click)="logarray()">log array</button>
            </div>
            <div class="col-xs-12">
                <ul class="list-group">
                    <li *ngFor="let item of items" class="list-group-item" #ival>
                        {{item}}
                        <button class="pull-right btn btn-sm btn-warning" (click)="deleteItem(ival.value)">Delete
                        </button>
                    </li>
                </ul>
            </div>
            <h3>{{value}}</h3>
            <br>
        </div>
    `
})

export class TestsComponent {

    items: string[] = [];

    constructor(
        private logService: LogService,
        private dataService: DataService) {

    }

    logM(message: string) {
        this.logService.WriteToLog(message);
    }

    store(message: string) {
        this.dataService.addData(message);
    }

    send(message: string) {
    }

    show() {
        this.items = this.dataService.getData();
    }

    deleteItem(message: string) {
        this.dataService.deleteMsg(message);
    }

    logarray() {
        this.logService.WriteToLog(this.items.toString());
    }
}

现在，一切都很好，除了当我尝试删除一个项目时。日志显示该项目仍然存在于数组中，因此仍然显示在页面上。我如何在使用删除按钮选择项目后将其删除？

- aghed aljlad

Answer 1

您无法使用delete从数组中删除一个元素。这仅用于从对象中删除属性。

您应该使用splice来从数组中移除一个元素：

deleteMsg(msg:string) {
    const index: number = this.data.indexOf(msg);
    if (index !== -1) {
        this.data.splice(index, 1);
    }        
}

- Poul Kruijt

---

注意：如果你没有检查 indexOf() 的返回值是否为 -1，那么当未找到 msg 时，这将会移除数组中的最后一项！ - Martin Schneider

flm shokiiiiiiii - Ibrahim S. Gerbiqi

Answer 2

我认为在Angular 2中实现这一点的方法是使用筛选器(filter)方法：

this.data = this.data.filter(item => item !== data_item);

data_item是需要删除的项目。

- KaFu

---

在模板中，您应该使用管道来过滤您的数组。 - KaFu

removeArrayItem(objectitem){ this.totalArrayData = this.totalArrayData.filter(item => item.Id !== objectitem.id); console.log( this.totalArrayData) }. 它正在工作。谢谢 - gnganapath

这对我有用，因为某种原因 splice() 删除了数组中除我想要删除的值之外的一切。 - Yvonne Aburrow

@KaFu - 你能展示一下模板部分吗？你是如何使用管道的？ - sneha mahalank

匿名函数必须有返回值才能正常工作：this.data = this.data.filter(item => return item !== data_item); - Igor Zelaya

Answer 3

不要使用delete来从数组中移除一个项目，而是使用splice()。

this.data.splice(this.data.indexOf(msg), 1);

参考类似问题：如何在JavaScript中删除数组中的特定元素？

需要注意的是，TypeScript是ES6的超集（数组在TypeScript和JavaScript中相同），所以即使在使用TypeScript时，也可以寻找JavaScript解决方案。

- martin

---

注意：如果你没有检查 indexOf() 返回的值是否为 -1，那么当没有找到 msg 时，这会将数组中的最后一项移除！ - Vinay Jeurkar

Answer 4

<tbody *ngFor="let emp of $emps;let i=index">

<button (click)="deleteEmployee(i)">Delete</button></td>

和

deleteEmployee(i)
{
  this.$emps.splice(i,1);
}

- gulla prathap reddy

Answer 5

您可以这样使用：

removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }

- Abdus Salam Azad

Answer 6

可以按照以下方式实现：

```this.itemArr = this.itemArr.filter( h => h.id !== ID);```

这段代码可以过滤掉id等于ID的数组元素，并将结果重新赋值给itemArr数组。

- HamidKhan

Answer 7

有时候，仅使用splice是不够的，特别是当你的数组涉及到FILTER逻辑时。因此，首先你可以检查你的元素是否存在，以确保删除这个确切的元素：

if (array.find(x => x == element)) {
   array.splice(array.findIndex(x => x == element), 1);
}

- Alessandro Ornano

---

你这样做不是有点低效吗？明明可以只查找一次，为什么要查找两次呢？ - rhavelka

@rhavelka 根据 Angular 版本的不同，如果您的 splice 崩溃而不是返回 null，则此代码应该是安全的，以避免无用的 splice。 - Alessandro Ornano

没错，我并不是说你的逻辑有问题，只是它可以被轻松地优化。你正在执行一个 find，然后是一个 findIndex，这是两次搜索，而你可以只做一次（就像被接受的答案）。 - rhavelka

@AlessandroOrnano 太棒了！ - Radiant

Answer 8

//declaration 
list: Array<any> = new Array<any>(); 

//remove item from an array 
removeitem() 
{
const index = this.list.findIndex(user => user._id === 2); 
this.list.splice(index, 1); 
}

- Muniaswari D

Answer 9

您可以从数组中删除数据。

this.data.splice(index, 1);

- Jatin Devani

Answer 10

使用splice()从数组中删除项，它会刷新数组索引以便连续。 delete将从数组中删除该项，但不会刷新数组索引，这意味着如果您要从四个数组项中删除第三个项，则在删除元素0、1和4后，元素的索引将发生变化。

this.data.splice(this.data.indexOf(msg), 1)

- mbadeveloper

---

这与@Martin的答案有何不同？ - Ojonugwa Jude Ochalifu