supprimer l'élément du tableau stocké dans angulaire 2

Je souhaite supprimer un élément d'un tableau stocké dans angular 2, avec Type Script. J'utilise un service appelé Data Service, le 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)];
    }
}

Et ma classe de composant:

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

Maintenant, tout fonctionne bien sauf lorsque j'essaye de supprimer un élément. Le journal me montre que l'élément est toujours dans le tableau et qu'il est donc toujours affiché sur la page. Comment puis-je supprimer l'élément après l'avoir sélectionné avec le bouton Supprimer ??

Vous ne pouvez pas utiliser deletepour supprimer un élément d'un tableau. Ceci n'est utilisé que pour supprimer une propriété d'un objet.

Vous devez utiliser splice pour supprimer un élément d'un tableau:

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

Je pense que la méthode Angular 2 pour faire cela est la méthode du filtre:

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

où data_item est l'élément à supprimer

Ne pas utiliser deletepour supprimer un élément du tableau et l'utiliser à la splice()place.

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

Voir une question similaire: Comment supprimer un élément particulier d'un tableau en JavaScript?

Notez que TypeScript est un sur-ensemble d'ES6 (les tableaux sont les mêmes dans TypeScript et JavaScript), alors n'hésitez pas à rechercher des solutions JavaScript même lorsque vous travaillez avec TypeScript.

Ceci peut être réalisé comme suit:

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

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

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

et

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

Vous pouvez utiliser comme ceci:

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

Parfois, l'épissure n'est pas suffisante, surtout si votre tableau est impliqué dans une logique FILTER. Donc, tout d'abord, vous pouvez vérifier si votre élément existe pour être absolument sûr de supprimer cet élément exact:

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

Utilisez splice()pour supprimer l'élément du tableau et actualiser l'index du tableau en conséquence.

delete supprimera l'élément du tableau mais ne rafraîchira pas l'index du tableau, ce qui signifie que si vous souhaitez supprimer le troisième élément de quatre éléments du tableau, l'index des éléments sera après la suppression de l'élément 0,1,4

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

Vous pouvez supprimer les données du tableau

this.data.splice(index, 1);

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

Cela fonctionne pour moi

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);