remove item from stored array in angular 2

问题:

I want to remove an item from a stored array in angular 2, with Type Script. I am using a service called Data Service, the DataService Code:

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)];
    }
}

And my component class:

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

Now, everything is working good except when I try to delete an item. The log shows me that the item is still in the array, and therefore is still shown on the page. How can I remove the item after selecting it with the delete button??

回答1:

You can't use delete to remove an item from an array. This is only used to remove a property from an object.

You should use splice to remove an element from an array:

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

回答2:

I think the Angular 2 way of doing this is the filter method:

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

where data_item is the item that should be deleted

回答3:

Don't use delete to remove an item from array and use splice() instead.

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

See a similar question: How do I remove a particular element from an array in JavaScript?

Note, that TypeScript is a superset of ES6 (arrays are the same in both TypeScript and JavaScript) so feel free to look for JavaScript solutions even when working with TypeScript.

回答4:

This can be achieved as follows:

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

回答5:

Sometimes, splice is not enough especially if your array is involved in a FILTER logic. So, first of all you could check if your element does exist to be absolute sure to remove that exact element:

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

回答6:

You can use like this:

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

回答7:

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

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

and

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

回答8:

Use splice() to remove item from the array its refresh the array index to be consequence.

delete will remove the item from the array but its not refresh the array index which means if you want to remove third item from four array items the index of elements will be after delete the element 0,1,4

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

回答9:

You can delete the data from array

this.data.splice(index, 1);

回答10:

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

回答11:

That work for me

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);