rimuove l'elemento dall'array memorizzato in angular 2

Voglio rimuovere un elemento da un array memorizzato in angular 2, con Type Script. Sto utilizzando un servizio chiamato Data Service, il codice 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)];
    }
}

E la mia classe di componenti:

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

Ora tutto funziona bene tranne quando provo a eliminare un elemento. Il registro mostra che l'elemento è ancora nell'array, e quindi è ancora mostrato nella pagina. Come posso rimuovere l'elemento dopo averlo selezionato con il pulsante Elimina?

Non è possibile utilizzare deleteper rimuovere un elemento da un array. Viene utilizzato solo per rimuovere una proprietà da un oggetto.

Dovresti usare splice per rimuovere un elemento da un array:

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

Penso che il modo Angular 2 per farlo sia il metodo del filtro:

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

dove data_item è l'elemento che dovrebbe essere eliminato

Non utilizzare deleteper rimuovere un elemento dall'array e utilizzare splice()invece.

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

Vedi una domanda simile: come rimuovo un particolare elemento da un array in JavaScript?

Nota che TypeScript è un superset di ES6 (gli array sono gli stessi sia in TypeScript che in JavaScript) quindi sentiti libero di cercare soluzioni JavaScript anche quando lavori con TypeScript.

Ciò può essere ottenuto come segue:

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>

e

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

Puoi usare in questo modo:

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

A volte, la giunzione non è sufficiente soprattutto se il tuo array è coinvolto in una logica FILTER. Quindi, prima di tutto potresti controllare se il tuo elemento esiste per essere assolutamente sicuro di rimuovere quell'elemento esatto:

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

Utilizzare splice()per rimuovere l'elemento dall'array, aggiorna l'indice dell'array come conseguenza.

delete rimuoverà l'elemento dall'array ma non aggiorna l'indice dell'array il che significa che se vuoi rimuovere il terzo elemento da quattro elementi dell'array l'indice degli elementi sarà dopo l'eliminazione dell'elemento 0,1,4

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

È possibile eliminare i dati dall'array

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

Questo funziona per me

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);