0

Tengo un componente de angular material, una tabla, donde tengo el registro de todos los productos que hay en la BD. La idea es que cuando elimino un producto mediante una petición http, este cambio se vea reflejado automáticamente sin la necesidad de actualizar la página, ósea, que se actualice el componente. ¿Alguien me podría dar una mano? dejo el código.

<section class="example-container mat-elevation-z8" tabindex="0">
  <table mat-table [dataSource]="productos">

    <!-- Position Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> Id </th>
      <td mat-cell *matCellDef="let producto"> {{producto.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="nombre">
      <th mat-header-cell *matHeaderCellDef> Nombre </th>
      <td mat-cell *matCellDef="let producto"> {{producto.nombre}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="precio">
      <th mat-header-cell *matHeaderCellDef> Precio </th>
      <td mat-cell *matCellDef="let producto"> {{producto.precio}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="stock">
      <th mat-header-cell *matHeaderCellDef> Stock </th>
      <td mat-cell *matCellDef="let producto">{{producto.stock}} </td>
    </ng-container>

    <ng-container matColumnDef="productor">
      <th mat-header-cell *matHeaderCellDef> Productor </th>
      <td mat-cell *matCellDef="let producto">{{producto.productor}} </td>
    </ng-container>
    
    <ng-container matColumnDef="editar">
      <th mat-header-cell *matHeaderCellDef>  </th>
      <td mat-cell *matCellDef="let j = index;">
        <button mat-raised-button>
          Editar
        </button>
      </td>
    </ng-container>

    <ng-container matColumnDef="eliminar">
      <th mat-header-cell *matHeaderCellDef>  </th>
      <td mat-cell *matCellDef="let producto">
        <button mat-raised-button color="warn" (click)="deleteProducto(producto.id)">
          Eliminar
        </button>
      </td>
    </ng-container>
    
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>  
</section>
<app-boton-agregar></app-boton-agregar>

Abajo el Componente

import {Component, OnInit} from '@angular/core';
import { Producto } from '../interfaces/producto';
import { ProductoService } from '../services/producto.service';
/**
 * @title Table with sticky header
 */
@Component({
  selector: 'app-tabla-products',
  styleUrls: ['tabla-productos.component.scss'],
  templateUrl: 'tabla-productos.component.html',
})
export class TablaProductosComponent implements OnInit {
  displayedColumns = ['id', 'nombre', 'precio', 'stock', 'productor', 'editar', 'eliminar'];
  productos: Producto[] = [];  
  

  constructor(private productoService: ProductoService) {    
  }

  ngOnInit(): void {
    this.getProductos();     
  }  
 
   getProductos(): void{
    this.productoService.getProductos()
    .subscribe(productos => this.productos = productos);
  } 

  deleteProducto(id: number):void{
    this.productoService.deleteProducto(id)
    .subscribe();
        
  }   

}

La idea de esto es que cuando haga click en el botón de borrar, se elimine en elemento de la vista y se vea automáticamente reflejado. Así como esta, cuando hago click en el botón de borrar se elimina el registro de la base de datos, pero tengo que reiniciar la página para que este desaparezca de la vista.

0

1 respuesta 1

2

Al ser tus productos un arreglo, podrías filtrar el mismo arreglo en la vista sin necesidad de consultar el servicio, haciendo algo así

this.productos = this.productos.filter(producto => producto.id !== id)

1
  • Muchas gracias! era eso. el 9 feb. 2023 a las 19:02

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.