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;
}
}