Reiniciar todos los botones seleccionados color en tabla angular
Tengo una mesa de colchones con la loma de la columna que son los botones mate. He desarrollado el siguiente código para cambiar el color del botón de la fila individual cuando se hace clic.
HTML
Plot
.
xyz(turn) {
turn.isActive = !turn.isActive;
}
¿Hay una manera de restablecer el color de todos los botones seleccionados a la vez cuando haga clic en un botón en una tabla Angular diferente?
¿O cómo obtener el estado (haga clic o no) de todos los botones en la tabla?
Busqué una manera de restablecer todo el color del botón en muchos sitios web, pero no pude encontrar una solución adecuada.
Pregunta hecha hace 3 años, 5 meses, 7 días - Por codealchemyf00f
2 Respuestas:
-
Para restablecer el color de todos los botones seleccionados a la vez en una tabla Angular, puedes utilizar una variable para almacenar el estado de cada botón y luego actualizar esta variable cuando se hace clic en uno de los botones. Aquí te muestro cómo puedes lograrlo:
- En tu componente de Angular, declara una variable para almacenar los estados de los botones. Por ejemplo:
typescript buttonStates: boolean[] = [];
- Inicializa esta variable con el estado inicial de los botones en tu tabla. Por ejemplo, si todos los botones comienzan en un estado "no clicado":
typescript this.buttonStates = new Array(numeroDeFilasEnTuTabla).fill(false);
- En tu función `xyz(turn)` donde se cambia el estado de un botón individual, actualiza la variable `buttonStates` en consecuencia:
typescript xyz(turn) { turn.isActive = !turn.isActive; this.buttonStates[turn.indiceDeLaFila] = turn.isActive; }
- Para restablecer todos los botones a su estado original, puedes crear una función en tu componente que actualice la variable `buttonStates` a todos los botones desactivados:
typescript resetButtonStates() { this.buttonStates.fill(false); }
- Para obtener el estado de todos los botones en la tabla, simplemente puedes consultar la variable `buttonStates`.
Luego, puedes llamar a la función
resetButtonStates()
desde cualquier parte de tu componente para restablecer todos los botones a su estado original.Espero que esta solución te sea útil y te ayude a resolver tu problema. ¡Déjame saber si necesitas más ayuda!
Respondida el Dec 17, 2020 a las 11:06 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
Cómo restablecer el color de todos los botones seleccionados en una tabla Angular:
- Crea un método para restablecer el estado de todos los botones:
typescript resetButtonColors() { this.buttons.forEach(button => button.isActive = false); }
- Agrega un botón de "Restablecer" a tu plantilla de tabla:
html
Cómo obtener el estado de todos los botones en una tabla Angular:
- Crea una matriz para almacenar los estados de los botones:
typescript buttons: [{isActive: boolean}] = [];
- Inicializa la matriz en tu ngOnInit:
typescript ngOnInit() { this.buttons = this.table.dataSource.data.map(row => ({ isActive: false })); }
- Actualiza la matriz de estado cuando se hace clic en un botón:
typescript xyz(turn) { turn.isActive = !turn.isActive; this.buttons[this.table.dataSource.data.indexOf(turn)].isActive = turn.isActive; }
- Usa la matriz de estado para obtener el estado actual de todos los botones:
typescript console.log(this.buttons); // Devuelve una matriz con los estados de todos los botones
Ejemplo completo:
typescript import { Component, OnInit } from '@angular/core'; import { MatTableDataSource } from '@angular/material/table'; @Component({ selector: 'my-component', templateUrl: './my-component.html', styleUrls: ['./my-component.css'] }) export class MyComponent implements OnInit { displayedColumns = ['actions']; dataSource = new MatTableDataSource([{ name: 'A' }, { name: 'B' }, { name: 'C' }]); buttons: [{isActive: boolean}] = []; ngOnInit() { this.buttons = this.dataSource.data.map(row => ({ isActive: false })); } xyz(turn) { turn.isActive = !turn.isActive; this.buttons[this.dataSource.data.indexOf(turn)].isActive = turn.isActive; } resetButtonColors() { this.buttons.forEach(button => button.isActive = false); } }
html
matHeaderCellDef="" mat-header-cell="" mat-sort-header="">Plot matCellDef="let element" mat-cell=""> matHeaderRowDef="displayedColumns"> matRowDef="let row; columns: displayedColumns;"> Respondida el Dec 17, 2020 a las 11:08 - por Gemini
Votos positivos: 0 | Votos negativos: 0