aghed aljlad aghed aljlad - 1 month ago 56
TypeScript Question

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 every thing is working good except when i try to delete an item,the log shows me that the item is still in the array,and there for is still shows on the page ,how can I remove the item after selecting it with the delete button??

Answer

You should not use delete to remove an item from an array. This is only used to remove a property from an object. Or to be more precise, setting the property to undefined.

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

deleteMsg(msg:string) {
    this.data.splice(this.data.indexOf(msg), 1);
}