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

Posted 2023-02-22

【中文标题】从角度2中的存储数组中删除项目

【英文标题】：remove item from stored array in angular 2

【发布时间】：2017-03-20 15:08:10

【问题描述】：

我想使用 Type Script 从 angular 2 中的存储数组中删除一个项目。我正在使用一个名为 Data Service 的服务，DataService 代码：

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());
    

现在，除了我尝试删除某个项目外，一切正常。日志显示该项目仍在数组中，因此仍显示在页面上。使用删除按钮选择项目后如何删除？？

【参考方案1】：

您不能使用delete 从数组中删除项目。这仅用于从对象中删除属性。

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

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

【讨论】：

注意： 如果您不检查 indexOf() 的返回 -1，这将在未找到 msg 时从数组中删除最后一项!

【参考方案2】：

不要使用delete 从数组中删除项目，而是使用splice()。

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

查看类似问题：How do I remove a particular element from an array in javascript?

请注意，TypeScript 是 ES6 的超集（TypeScript 和 JavaScript 中的数组相同），因此即使使用 TypeScript，也可以随意寻找 JavaScript 解决方案。

【讨论】：

注意： 如果您不检查 indexOf() 的返回 -1，这将在未找到 msg 时从数组中删除最后一项!

【参考方案3】：

我认为 Angular 2 的做法是过滤器方法：

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

其中 data_item 是应删除的项目

【讨论】：

在模板中你应该使用管道来过滤你的数组

removeArrayItem(objectitem) this.totalArrayData = this.totalArrayData.filter(item => item.Id !== objectitem.id);控制台日志（this.totalArrayData）。它正在工作。谢谢

这对我有用，因为某种原因splice() 正在删除所有除了我想从数组中删除的值

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

匿名函数应该有一个返回值才能正常工作：this.data = this.data.filter(item => return item !== data_item);

【参考方案4】：

使用splice() 从数组中删除项目，其结果是刷新数组索引。

delete 将从数组中删除该项目，但不会刷新数组索引，这意味着如果您想从四个数组项中删除第三项，则元素的索引将在删除元素 0、1、4 之后

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

【讨论】：

这与@Martin 的回答有何不同？

【参考方案5】：

你可以从数组中删除数据

this.data.splice(index, 1);

【参考方案6】：

这可以通过以下方式实现：

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

【参考方案7】：

//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); 

【参考方案8】：

有时，拼接是不够的，尤其是当您的数组涉及 FILTER 逻辑时。所以，首先你可以检查你的元素是否确实存在，以确保删除那个确切的元素：

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

【讨论】：

这是不是有点低效，因为你在做 2 次查找，而你只能做 1 次查找？

@rhavelka 取决于拼接角度版本：如果你的拼接崩溃而不是为空，这段代码应该安全地避免无用的拼接..

对，我并不是说你的逻辑有缺陷，只是说它可以很容易地优化。你正在做一个find，然后是一个findIndex，当你可以做一个时，这是两个搜索（比如接受的答案）。

@AlessandroOrnano 太棒了！

【参考方案9】：

你可以这样使用：

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

【参考方案10】：

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

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

和

deleteEmployee(i)

  this.$emps.splice(i,1);

【参考方案11】：

这对我有用

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);

【讨论】：

pop() 删除最后一个元素而不是您选择的元素