Usuń element z przechowywanej tablicy w kanciastym 2

Question

Chcę usunąć element z przechowywanej tablicy w kancie 2, za pomocą skryptu typu. Używam usługę o nazwie danych usług, Kodeksem 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)]; 
} 
} 

i moją klasę komponent:

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

Teraz wszystko działa dobrze z wyjątkiem, gdy próbuję usunąć element. Dziennik pokazuje mi, że element wciąż znajduje się w tablicy i dlatego jest nadal wyświetlany na stronie. Jak mogę usunąć przedmiot po wybraniu go przyciskiem kasowania?

Answer 1

Nie można użyć delete, aby usunąć element z tablicy. Ta funkcja służy tylko do usunięcia właściwości z obiektu. A może bardziej precyzyjnie, ustawiając nieruchomość na undefined.

Należy użyć splice aby usunąć element z tablicy:

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

Answer 2

Nie używaj delete aby usunąć element z tablicy i używać splice() zamiast.

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

Zobacz podobne pytanie: How do I remove a particular element from an array in JavaScript?

Zauważ, że maszynopis jest rozszerzeniem ES6 (tablice są takie same zarówno w maszynopisie i JavaScript), dlatego zachęcamy do poszukiwania rozwiązań JavaScript nawet podczas pracy przy maszynie .

Answer 3

myślę kątowej 2 to sposobem jest metoda filtr:

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

gdzie data_item jest element, który powinien zostać usunięty

EDIT zapomniałem coś ważnego - trzeba Zastąp swoją tablicę wynikiem z powyższej linii:

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