web-dev-qa-db-fra.com

supprimer un élément du tableau stocké dans angular 2

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

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'essaie 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?

angulartypescript
66
aghed aljlad

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

Vous devriez 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);
    }        
}
136
PierreDuc

Je pense que la méthode angulaire 2 consiste à utiliser la méthode du filtre:

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

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

80
KaFu

N'utilisez pas delete pour supprimer un élément du tableau et utilisez plutôt splice().

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

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

Notez que TypeScript est un sur-ensemble d'ES6 (les tableaux sont identiques dans TypeScript et JavaScript). N'hésitez donc pas à rechercher des solutions JavaScript même lorsque vous utilisez TypeScript.

27
martin

Vous pouvez utiliser comme ceci:

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

Vous pouvez supprimer les données du tableau 

this.data.splice(index, 1);
0
Jatin Devani

Ça marche pour moi

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);
0
Vishal Monga
//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); 
}
0
Muniaswari D
<tbody *ngFor="let emp of $emps;let i=index">

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

et

deleteEmployee(i)
{
  this.$emps.splice(i,1);
}
0
gulla prathap reddy

Parfois, l’épissage n’est pas suffisant, en particulier 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);
}
0
Alessandro Ornano

Utilisez splice() pour supprimer un élément du tableau, actualisez-le et indiquez-le en conséquence. 

delete supprimera l'élément du tableau, mais ce n'est pas actualiser 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

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