3

quisera saber como puedo hacer cuando elimino un registro de una tabla esta automaticamente se quite de esa tabla, ya que cuanto elimino siempre debo de recargar la pagina para ya no ver el registro eliminado en la tabla.

Mi codigo ts:

import { Component, OnInit } from '@angular/core';
import {ArtistaserviceService} from './../../services/artistaservice.service';

@Component({
  selector: 'app-artista',
  templateUrl: './artista.component.html',
  styles: []
})
export class ArtistaComponent implements OnInit{
  
  artistas:any[] = [];

  constructor(private artistaS:ArtistaserviceService) {
    
   }

  ngOnInit(){
     this.artistaS.getArtistas()
     .subscribe(data =>{
       this.artistas = data;
       console.log(this.artistas);
     })
  }

  borrarArtista(id:string){
    this.artistaS.borrarArtista(id)
    .subscribe(
      respuesta => {
        if(respuesta){
          console.log(respuesta);
          
        }
        else{
          delete this.artistas[id];
         

        }
      }
    )
    
  }

 
}

Mi HTML:

                <tr *ngFor="let art of artistas; let i = index">
                    <td>{{i+1}}</td>



                    <td>{{art.nombreartista}}</td>
                    <td>{{art.anonacimiento}}</td>
                    <td>{{art.descripcion1}}</td>
                    <td class="text-rigth w120">

                        <button [routerLink]="['/arts', art.idartista]" type="submit" class="btn btn-outline-success">
          Editar
          </button>

                        <button type="submit" (click)="borrarArtista(art.idartista)" class="btn btn-outline-danger">
          Eliminar
          </button>
                    </td>
                </tr>

            </tbody>

3 respuestas 3

1

El operador deleteno elimina elementos de un array, simplemente deja undefined en esa posición:

let array=[1,2,3,4]

delete array[2];

console.log(array);
console.log(array.length);

Usa splice para eliminar:

let array=[1,2,3,4];
array.splice(2,1); //desde la posición 2, eliminamos 1 elemento
console.log(array);

0

Te recomendaría que el código que tienes en el ngOnInit() lo saques y lo escribas dentro de un método normal de la clase, así:

ngOnInit(){
   getArtistas();
}

getArtistas(){
   this.artistaS.getArtistas()
      .subscribe(data =>{
         this.artistas = data;
      console.log(this.artistas);
   })
}

haciendo esto, cuando ejecutes el método de borrarArtista() dentro del condicional que tienes pones el método getArtistas(), así:

if(respuesta){
   console.log(respuesta);
   getArtistas()     
}

haciendo lo anterior se te actualiza la información que estas mostrando

0

Amigo con un .filter() se puede hacer

borrarArtista(id:string){
    this.artistaS.borrarArtista(id)
    .subscribe(
      respuesta => {
        if(respuesta){
        this.artistas = this.artistas.filter( ar => ar.id != id)


          console.log(respuesta);
          
        }
        else{
          delete this.artistas[id];
         

        }
      }
    )
    
  } 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.