eliminar el elemento de la matriz almacenada en angular 2

5 minutos de lectura

avatar de usuario
aghed aljlad

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 servicio de datos:

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?

avatar de usuario
Poul Kruijt

no puedes usar delete para eliminar un elemento de una matriz. Esto solo se usa para eliminar una propiedad de un objeto.

Deberías 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);
    }        
}

  • Nota: Si no comprueba la devolución de indexOf() por -1esto eliminará el último elemento de la matriz cuando msg no fue encontrado!

    – Martín Schneider

    3 de febrero de 2017 a las 15:08


avatar de usuario
kafu

Creo que la forma 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

  • en la plantilla, debe usar una tubería para filtrar su matriz

    – Ka Fu

    31 de enero de 2017 a las 21:32

  • removeArrayItem(objectitem){ this.totalArrayData = this.totalArrayData.filter(item => item.Id !== objectitem.id); consola.log( this.totalArrayData) }. Esta funcionando. Gracias

    – gnganapath

    13 de julio de 2017 a las 7:41


  • esto funcionó para mí, como por alguna razón splice() estaba quitando todo excepto el valor que quería eliminar de la matriz

    – Yvonne Aburrow

    28 de noviembre de 2018 a las 22:26

  • @KaFu – ¿Puede mostrar la parte de la plantilla, cómo está usando la tubería?

    – sneha mahalank

    7 de abril de 2020 a las 8:46


  • La función anónima debe tener un retorno para que funcione: this.data = this.data.filter(item => return item !== data_item);

    – Ígor Zelaya

    14 de agosto de 2020 a las 2:20


avatar de usuario
martín

no usar delete para eliminar un elemento de la matriz y usar splice() en cambio.

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

Vea una pregunta similar: ¿Cómo elimino un elemento 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.

  • Nota: Si no comprueba la devolución de indexOf() por -1esto eliminará el último elemento de la matriz cuando msg no fue encontrado!

    – Vinay Jeurkar

    6 de marzo de 2019 a las 6:39

avatar de usuario
gulla prathap reddy

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

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

y

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

Puedes usar así:

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

avatar de usuario
Félix Gerber

Esto se puede lograr de la siguiente manera:

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

avatar de usuario
Alessandro Ornano

A veces, el empalme no es suficiente, especialmente si su matriz está involucrada en una lógica de FILTRO. Entonces, antes que nada, 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);
}

  • ¿No es esto un poco ineficiente ya que está haciendo 2 hallazgos cuando solo puede hacer 1?

    – ravelka

    28 de julio de 2020 a las 15:15

  • @rhavelka Depende de la versión angular de empalme: si su empalme falla en lugar de ser nulo, este código debería ser seguro para evitar un empalme inútil.

    – Alessandro Ornano

    28 de julio de 2020 a las 17:42


  • Correcto, no estoy diciendo que su lógica sea defectuosa, solo que podría optimizarse fácilmente. estas haciendo un findEntonces un findIndexson dos búsquedas cuando podría hacer una (como la respuesta aceptada).

    – ravelka

    28 de julio de 2020 a las 20:38


  • @AlessandroOrnano Genial!

    – Radiante

    7 jun 2021 a las 21:03

¿Ha sido útil esta solución?