Entfernen Sie das Element aus dem gespeicherten Array in Winkel 2

Ich möchte ein Element aus einem gespeicherten Array in Winkel 2 mit Type Script entfernen. Ich verwende einen Dienst namens Data Service, den 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)];
    }
}

Und meine Komponentenklasse:

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

Jetzt funktioniert alles gut, außer wenn ich versuche, ein Element zu löschen. Das Protokoll zeigt mir, dass sich das Element noch im Array befindet und daher immer noch auf der Seite angezeigt wird. Wie kann ich das Element entfernen, nachdem ich es mit der Schaltfläche Löschen ausgewählt habe?

Sie können deleteein Element nicht aus einem Array entfernen. Dies wird nur verwendet, um eine Eigenschaft aus einem Objekt zu entfernen.

Sie sollten Spleiß verwenden , um ein Element aus einem Array zu entfernen:

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

Ich denke, die Angular 2-Methode ist die Filtermethode:

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

Dabei ist data_item das Element, das gelöscht werden soll

Verwenden Sie deletediese Option nicht , um ein Element aus dem Array zu entfernen, und verwenden Sie sie splice()stattdessen.

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

Siehe eine ähnliche Frage: Wie entferne ich ein bestimmtes Element aus einem Array in JavaScript?

Beachten Sie, dass TypeScript eine Obermenge von ES6 ist (Arrays sind in TypeScript und JavaScript gleich). Sie können also auch bei der Arbeit mit TypeScript nach JavaScript-Lösungen suchen.

Dies kann wie folgt erreicht werden:

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>

und

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

Sie können wie folgt verwenden:

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

Manchmal reicht Spleißen nicht aus, insbesondere wenn Ihr Array an einer FILTER-Logik beteiligt ist. Zunächst können Sie also überprüfen, ob Ihr Element vorhanden ist, um sicherzugehen, dass genau dieses Element entfernt wird:

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

Verwenden Sie splice()diese Option , um ein Element aus dem Array zu entfernen, und aktualisieren Sie den Array-Index als Konsequenz.

delete Das Element wird aus dem Array entfernt, der Array-Index wird jedoch nicht aktualisiert. Wenn Sie also das dritte Element aus vier Array-Elementen entfernen möchten, wird der Index der Elemente nach dem Löschen des Elements 0,1,4 angezeigt

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

Sie können die Daten aus dem Array löschen

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

Diese Arbeit für mich

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);