Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 223
aghed aljlad Avatar asked Oct 07 '22 21:10

aghed aljlad


People also ask

How to remove object from array of objects in TypeScript?

Therefore, removing an element in the array is a process of removing or deleting any item from the given array with the help of methods provided by typescript arrays such as pop(), shift(), and splice() functions & delete operator are used for removing the item in array but delete() function is only used when we want ...

How do you remove one property from an object in TypeScript?

To remove a property from an object in TypeScript, mark the property as optional on the type and use the delete operator. You can only remove properties that have been marked optional from an object.


1 Answers

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);
    }        
}
like image 274
Poul Kruijt Avatar answered Oct 21 '22 07:10

Poul Kruijt