eliminar el elemento de la matriz almacenada en angular 2

119

Quiero eliminar un elemento de una matriz almacenada en angular 2, con Type Script. Estoy usando un servicio llamado Servicio de datos, el Código de :

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

Y mi clase de componente:

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

Ahora, todo funciona bien, excepto cuando intento eliminar un elemento. El registro me muestra que el elemento todavía está en la matriz y, por lo tanto, todavía se muestra en la página. ¿Cómo puedo eliminar el elemento después de seleccionarlo con el botón Eliminar?

aghed aljlad
fuente

Respuestas:

229

No puede usar deletepara eliminar un elemento de una matriz. Esto solo se usa para eliminar una propiedad de un objeto.

Debe usar empalme para eliminar un elemento de una matriz:

deleteMsg(msg:string) {
    const index: number = this.data.indexOf(msg);
    if (index !== -1) {
        this.data.splice(index, 1);
    }        
}
Poul Kruijt
fuente
17
Nota: Si usted no marca el regreso de indexOf()para -1, se eliminará el último elemento de la matriz cuando msgno se ha encontrado!
Martin Schneider
130

Creo que la forma de Angular 2 de hacer esto es el método de filtro:

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

donde data_item es el elemento que debe eliminarse

KaFu
fuente
2
en la plantilla, debe usar una tubería para filtrar su matriz
KaFu
1
removeArrayItem (objectitem) {this.totalArrayData = this.totalArrayData.filter (item => item.Id! == objectitem.id); console.log (this.totalArrayData)}. Esta funcionando. Gracias
gnganpath
esto funcionó para mí, ya que por alguna razón splice()estaba eliminando todo excepto el valor que quería eliminar de la matriz
Yvonne Aburrow
@KaFu - ¿Puede mostrar la parte de la plantilla, cómo está usando la tubería?
sneha mahalank
35

No lo utilice deletepara eliminar un elemento de la matriz y utilizarlo splice()en su lugar.

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

Vea una pregunta similar: ¿Cómo elimino un elemento en particular de una matriz en JavaScript?

Tenga en cuenta que TypeScript es un superconjunto de ES6 (las matrices son las mismas tanto en TypeScript como en JavaScript), así que siéntase libre de buscar soluciones de JavaScript incluso cuando trabaje con TypeScript.

martín
fuente
3
Nota: Si usted no marca el regreso de indexOf()para -1, se eliminará el último elemento de la matriz cuando msgno se ha encontrado!
Vin
9

Esto se puede lograr de la siguiente manera:

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

HamidKhan
fuente
8
<tbody *ngFor="let emp of $emps;let i=index">

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

y

deleteEmployee(i)
{
  this.$emps.splice(i,1);
}
gulla prathap reddy
fuente
5

Puedes usar así:

removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }
Abdus Salam Azad
fuente
4

A veces, el empalme no es suficiente, especialmente si su matriz está involucrada en una lógica de FILTRO. Entonces, en primer lugar, puede verificar si su elemento existe para estar absolutamente seguro de eliminar ese elemento exacto:

if (array.find(x => x == element)) {
   array.splice(array.findIndex(x => x == element), 1);
}
Alessandro Ornano
fuente
¿No es esto un poco ineficaz ya que está haciendo 2 hallazgos cuando solo puede hacer 1?
rhavelka
@rhavelka Depende de la versión angular de empalme: si su empalme falla en lugar de ser nulo, este código debe ser seguro para evitar empalmes inútiles ..
Alessandro Ornano
Bien, no estoy diciendo que tu lógica sea defectuosa, solo que podría optimizarse fácilmente. Estás haciendo una find, luego una findIndex, son dos búsquedas cuando podrías hacer una (como la respuesta aceptada).
rhavelka
1

Úselo splice()para eliminar el elemento de la matriz, actualice el índice de la matriz para que sea una consecuencia.

delete eliminará el elemento de la matriz, pero no actualizará el índice de la matriz, lo que significa que si desea eliminar el tercer elemento de cuatro elementos de la matriz, el índice de elementos será después de eliminar el elemento 0,1,4

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

Puede eliminar los datos de la matriz

this.data.splice(index, 1);
Jatin Devani
fuente
0
//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); 
}
Muniaswari D
fuente
-2

Que funciona para mi

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);
Vishal Monga
fuente
6
pop () elimina el último elemento, no el elemento que seleccionó
rostamiani