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?
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);
}
}
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
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.
Vous pouvez utiliser comme ceci:
removeDepartment(name: string): void {
this.departments = this.departments.filter(item => item != name);
}
Vous pouvez supprimer les données du tableau
this.data.splice(index, 1);
Ça marche pour moi
this.array.pop(index);
for example index = 3
this.array.pop(3);
//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);
}
<tbody *ngFor="let emp of $emps;let i=index">
<button (click)="deleteEmployee(i)">Delete</button></td>
et
deleteEmployee(i)
{
this.$emps.splice(i,1);
}
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);
}
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)