0

Mi programa visualiza una tabla. Quiero poder clickear en uno de sus elementos y cambiarlo de posición al clickear en otro. Lo que se me ocurrió, es cambiar las posiciones del array pero esto no funcionó. Supongo que el error consiste en que la tabla ya fue generada y que por más que se cambien las posiciones en el array no se cambiará la vista. Además, al no estar usando base de datos (es un ejercicio básico) si actualizo la página tampoco se cambian ya que el array vuelve a construirse como estaba predefinido. ¿Que puedo implementar para solucionar esto? Muchas gracias

La vista:

<table border="1" >
    <tr>
        <td>Codigo</td>
        <td>Descripcion</td>
        <td>Precio</td>
        <td>Borrar</td>
        <td>Seleccionar</td>
    </tr>

    <tr *ngFor="let art of articulos">
        <td>{{art.codigo}}</td>
        <td>{{art.descripcion}}</td>
        <td>{{art.precio}}</td>
        <td><button (click)="borrar(art.codigo)">Borrar?</button></td>
        <td><button (click)="seleccionar(art)">Seleccionar</button></td>      
        <td><button (click)="corroborarSeleccion(art)">Cambiar de posición</button></td>     

      </tr>

</table>

El Componente donde está el método corroborarSeleccion:

  

        seleccionado: boolean = false; 
          numero: number = -1;
        
    
      art = {
        codigo: 0,
        descripcion: "",
        precio: 0
      }
    
      articulos = [{ codigo: 1, descripcion: 'Milanesa', precio: 50 },
      { codigo: 2, descripcion: 'Bife', precio: 35 },
      { codigo: 3, descripcion: 'Cerveza', precio: 80 },
      { codigo: 4, descripcion: 'Papas', precio: 26 },
      { codigo: 5, descripcion: 'Palmitos', precio: 17 },
      ];

    corroborarSeleccion(art: any) {
    
        let miNumero: number = Number(art);
      
        if (this.seleccionado) {
    
          let temp = this.articulos[miNumero];
          this.articulos[miNumero] = this.articulos[this.numero];
          this.articulos[this.numero] = temp;
    
    
         this.seleccionado = false;
        this.numero = -1;
    
        } else {
    
          this.seleccionado = true;
          this.numero = miNumero;
    
        }
    
      }

1 respuesta 1

1

Puedes usar trackBy para los cambios, lo que hace es reescribir los elementos que hayas cambiado.

En tu *ngFor:

<tr *ngFor="let articulo of articulos; let i = index, trackBy: trackByArticulo">

En tu componente:

trackByArticulo(i: number, articulo: Articulo) {
  return articulo.codigo;
}

Ahora para guardar los cambios se me ocurre que puedas usar el localStorage, y cada vez que recargues leerlos usando el ngOnInit, y si no existe nada que use los valores predeterminados (los que tienes en el código).

En tu if, agrega al final:

localStorage.setItem('articulos', JSON.stringify(this.articulos));

Mientras que para el ngOnInit:

ngOnInit() {
  if (!localStorage.getItem('articulos')) {
    this.articulos = [
      { codigo: 1, descripcion: 'Milanesa', precio: 50 },
      { codigo: 2, descripcion: 'Bife', precio: 35 },
      { codigo: 3, descripcion: 'Cerveza', precio: 80 },
      { codigo: 4, descripcion: 'Papas', precio: 26 },
      { codigo: 5, descripcion: 'Palmitos', precio: 17 },
    ];
  }
  
  this.articulos = JSON.parse(localStorage.getItem('articulos')!);
}

TrackByFunction

trackBy: Optimizando nuestras listas en Angular

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.