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, 0 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

    matHeaderRowDef="displayedColumns">matRowDef="let row; columns: displayedColumns;">
    
  
    matHeaderCellDef="" mat-header-cell="" mat-sort-header="">Plot
    matCellDef="let element" mat-cell="">

    Respondida el Dec 17, 2020 a las 11:08 - por Gemini

    Votos positivos: 0 | Votos negativos: 0