it-swarm.com.de

entfernen Sie den Artikel aus dem gespeicherten Array in Winkel 2

Ich möchte mit Type Script ein Element aus einem gespeicherten Array in Winkel 2 entfernen. Ich benutze einen Dienst namens Datenservice, der 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 an, dass sich das Element noch im Array befindet und daher immer noch auf der Seite angezeigt wird. Wie kann ich das Element entfernen, nachdem Sie es mit der Schaltfläche "Löschen" ausgewählt haben?

66
aghed aljlad

Sie können nicht delete verwenden, um ein Element aus einem Array zu entfernen. Dies wird nur zum Entfernen einer Eigenschaft aus einem Objekt verwendet.

Verwenden Sie splice , 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);
    }        
}
136
PierreDuc

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

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

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

80
KaFu

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

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 sowohl in TypeScript als auch in JavaScript identisch). Sie können also auch bei der Arbeit mit TypeScript nach JavaScript-Lösungen suchen.

27
martin

Dies kann wie folgt erreicht werden:

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

3
HamidKhan

Sie können wie folgt verwenden:

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

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

this.data.splice(index, 1);
0
Jatin Devani

Das funktioniert bei mir

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);
0
Vishal Monga
//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); 
}
0
Muniaswari D
<tbody *ngFor="let emp of $emps;let i=index">

<button (click)="deleteEmployee(i)">Delete</button></td>

und

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

Manchmal ist der Spleiß nicht ausreichend, insbesondere wenn Ihr Array in eine FILTER-Logik eingebunden ist. Sie können also zunächst prüfen, ob Ihr Element vorhanden ist, um sicher zu gehen, dass genau dieses Element entfernt wird:

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

Verwenden Sie splice(), um das Element aus dem Array zu entfernen. 

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

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