supprimer un élément d'un tableau stocké dans angular 2

Question

Je veux supprimer un élément d'un tableau stocké dans angular 2, avec le type script. J'utilise un service appelé Service de données, le code du 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 composants :

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 m'indique 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 de suppression ?

Answer 1

Vous ne pouvez pas utiliser delete pour supprimer un élément d'un tableau. Cette fonction n'est utilisée que pour supprimer une propriété d'un objet.

Vous devez utiliser épissure 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);
    }        
}

Answer 2

Je pense que la façon Angular 2 de faire cela est la méthode du filtre :

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

où data_item est l'élément qui doit être supprimé.

Answer 3

N'utilisez pas delete pour retirer un élément du tableau et utiliser splice() à la place.

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

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

Notez que TypeScript est un sur-ensemble de l'ES6 (les tableaux sont les mêmes en TypeScript et en JavaScript). N'hésitez donc pas à rechercher des solutions JavaScript même lorsque vous travaillez avec TypeScript.

Answer 4

Cela peut être réalisé comme suit :

this.itemArr = this.itemArr.filter( h => h.id !== ID);

Answer 5

Utilisez splice() pour supprimer un élément du tableau, il faut rafraîchir l'index du tableau pour qu'il soit conséquent.

delete supprimera l'élément du tableau mais ne rafraîchira pas l'index du tableau, ce qui signifie que si vous voulez supprimer le troisième élément de quatre éléments du tableau, l'index des éléments sera après avoir supprimé l'élément 0,1,4.

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