Tengo una matriz con 4 valores que alterno (elimino y agrego a la matriz).
selectedSections: any[] = ['one', 'two', 'three', 'four'];
Luego tengo un botón en el que haría clic para hacer que cada uno de los seleccionados aparezca y desaparezca.
<button (click)="toggleVal('one')">Toggle One</button> <button (click)="toggleVal('two')">Toggle Two</button> <button (click)="toggleVal('three')">Toggle Three</button> <button (click)="toggleVal('four')">Toggle Four</button>
Mi problema es que la función a continuación hace el trabajo de alternancia en gran medida, pero necesito poder hacer que los valores vuelvan a aparecer en la misma posición en la que se encuentran ahora. En este momento, cada vez que se agrega un valor, se agrega al final y necesito poder especificar en qué posición quiero que se agregue o una forma de hacer que permanezcan en la posición.
Aquí está el código a continuación:
toggleVal(val: any) { if (this.selectedSections.includes(val)) { let index = this.selectedSections.indexOf(val); this.selectedSections.splice(index, 1); } else { this.selectedSections.push(val); } this.howMany(); this.filterData(); }
¿Cómo puedo hacer que haga esto?
Puede pasar el valor de índice que desee con su función en su html. Entonces puedes usar: arr.splice(index, 0, item);
Insertará el elemento en arr en el índice especificado (eliminando 0 elementos primero, es decir, es solo una inserción).
<button (click)="toggleVal('one', 1)">Toggle One</button> <button (click)="toggleVal('two', 2)">Toggle Two</button> <button (click)="toggleVal('three', 3)">Toggle Three</button> <button (click)="toggleVal('four', 4)">Toggle Four</button> toggleVal(val: any, i: number) { if (this.selectedSections.includes(val)) { let index = this.selectedSections.indexOf(val); this.selectedSections.slice(index, 1); } else { this.selectedSections.splice(i, 0, val); } this.howMany(); this.filterData(); }