1

Tengo la siguiente tabla donde se puede editar el contenido del campo descripción, y a traves del icono Delete se puede eliminar el registro seleccionado, pero lo hace visualmente nada más, es decir, solo desaparece de la pantalla, pero en si en la BD sigue estando el registro, y lo que quiero es que se elimine de la BD a traves del servicio que ya tengo creado, pero que al hacer click en el icono de Delete, primero te mande un msj que diga, seguro que deseas eliminar el registro? y que tenga el boton de Aceptar/cancelar

mi html

<mat-expansion-panel>
                <button mat-raised-button class="buttonUpdate" color="primary"
                    (click)="obtenerProductos()">Actualizar
                    <mat-icon>update</mat-icon>
                </button>
                <mat-expansion-panel-header>
                    <mat-panel-title class="text">
                        Productos
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div class="scrollme">
                    <table mat-table [dataSource]="dataSourceProd" class="mat-elevation-z8">

                        <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef> ID  </th>
                            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
                        </ng-container>

                        <ng-container matColumnDef="descripcion">
                            <th mat-header-cell *matHeaderCellDef> DESCRIPCIÓN </th>
                            <td mat-cell *matCellDef="let element">
                                <mat-form-field class="example-form-field">
                                    <input matInput type="text" [value]="element.descripcion"
                                        (keyup)="changeValueDescTipo($event.target,element)"
                                        [disabled]="!element.editable">
                                </mat-form-field>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="botonEdit">
                            <th mat-header-cell *matHeaderCellDef> EDITAR </th>
                            <td mat-cell *matCellDef="let element">
                                <button mat-icon-button color="primary" (click)="actualizarProd(element)">
                                    <mat-icon>edit</mat-icon>
                                </button>
                            </td>
                        </ng-container>

                        <ng-container matColumnDef="botonDelete">
                            <th mat-header-cell *matHeaderCellDef> ELIMINAR </th>
                            <td mat-cell *matCellDef="let element">
                                <button mat-icon-button color="warn"
                                (click)="eliminarProductos($event.target,element)">
                                    <mat-icon>delete</mat-icon>
                                </button>
                            </td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="displayedColumnsProd"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumnsProd">
                        </tr>
                    </table>
                </div>
                <mat-paginator #paginatorCatalogos [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5]"
                    showFirstLastButtons>
                </mat-paginator>
            </mat-expansion-panel>

component.ts

 displayedColumnsProd: string[] = ['id', 'descripcion', 'botonEdit', 'botonDelete'];

    dataSourceProd: any;
    obtenerProductos() {
    this.productService.obtenerProducto().subscribe(response => {
      if (response.data.length == 0) {
        Swal.fire({
          icon: 'error',
          text: 'Sin datos '
        })
      } else {
        this.tipoProducto = response.data;
        this.dataSourceProd = new MatTableDataSource(this.tipoProducto);
        this.dataSourceProd.paginatorCatalogos = this.paginatorCatalogos;
      }

    });
  }
  
  //obtiene el valor de la descripcion 
  changeValueDescTipo(e: any, row: any) {
    this.idSelecc = row.id;
    this.tipoProductoDesc = e.value;
  }
  
  eliminarProductos(element: any,row: any) {
const index = this.dataSourceProd.data.indexOf(element);
this.dataSourceProd.data.splice(index);
this.dataSourceProd = new MatTableDataSource(this.dataSourceProd.data);

this.tipoProducto.id = row.id;
this.productService.eliminarProducto(this.tipoProducto).subscribe(response => {
  Swal.fire({
    icon: 'success',
    title: 'Éxito',
    text: '¿Seguro que deseas eliminar el registro?'
  });
});

}

Este es el servicio que elimina por ID el registro en la base datos

service.ts

eliminarProducto(tipoProducto: Producto){
    return this.httpClient.delete<Producto>(this.baseUrl+"/"+tipoProducto.id);
  }

lo que no sé, es como implementar en mi método eliminarProductos() el servicio que elimina por id el registro en la base de datos , pero que antes muestre una alerta para confirmar que se desea eliminar

4
  • 1
    this.llamadaATuServicio(idDelProducto); debería de permitirte llamarlo. En cuanto a la alerta, pues depende de qué alerta quieras mostrar, si vas a usar un componente propio, uno nativo o uno de angular material. No podemos hacer las cosas por ti, así que te recomiendo que elijas qué componente quieres usar para mostrar la alerta, lo intentes hacer y si tienes un problema concreto vengas a preguntar. "No se cómo hacerlo" por desgracia no es un problema concreto, es más un problema de no haber investigado e intentado algo, requisito obligatorio a la hora de abrir una pregunta en SO.
    – Benito-B
    el 20 jun. a las 6:08
  • @Benito-B, Ya agregué el servicio y ya elimina el registro desde BD,y agregue para el mensaje Swal.fire, pero cuando manda el mensaje de confirmación, ya se hizo la eliminación, actualice mi pregunta
    – Root93
    el 20 jun. a las 17:39
  • En eliminarProductos de donde sacas el row.id? Mandas un element del tipo any pero no veo de dónde sale row.
    – René
    el 20 jun. a las 17:58
  • @René Ya actualice el html y el método eliminarProductos, solo que no sé en que momento colocar el mensaje de confirmación
    – Root93
    el 20 jun. a las 19:34

1 respuesta 1

2

Para resolver el problema tienes que esperar a que se resuelva la promesa de SweetAlert por lo que necesitas un método asíncrono, código como ejemplo:

HTML

      <ng-container matColumnDef="Acciones">
        <th mat-header-cell *matHeaderCellDef>Acciones</th>
        <td mat-cell *matCellDef="let row">
          <button mat-mini-fab color="primary" (click)="guardar(row)">
            <mat-icon>edit</mat-icon>
          </button>
          <button mat-mini-fab color="warn" (click)="eliminar(row)">
            <mat-icon>delete</mat-icon>
          </button>
        </td>
      </ng-container>

Componente

  async eliminar(row: any) {
    const deleteAlert = await Swal.fire({
      title: 'Eliminar registro',
      showDenyButton: true,
      confirmButtonText: 'Eliminar',
    });

    if (deleteAlert.isConfirmed) {
      // Aquí agregas el código para eliminar el registro
    }
  }

Y de dónde sale isConfirmed? Si haces un console.log de deleteAlert vas a ver que tiene las siguientes propiedades: isConfirmed, isDenied, isDismissed y value, entonces cuando aceptas en el dialogo que aparece isConfirmed es true.

introducir la descripción de la imagen aquí

1
  • YA LO APLIQUE, GRACIAS!!!!
    – Root93
    el 20 jun. a las 23:25

Tu Respuesta

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

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