Single Checkbox in Mat-Table in Angular Strange Behavior

Situation: I have a table with a [dataSource]="dataComision" form that has a text input where a percentage is entered. Within the table, we have a checkbox, and when checked, all records in the table should be automatically checked and the percentage value copied. Currently, it does this correctly. However, if I uncheck all of them, 0 should be added to the table's text boxes, and it does this correctly. However, if I check only one, only the entered percentage should be added to the checked one. Currently, the percentage is added to all of them.

Codigo de la vista:

<table mat-table [dataSource]="dataComision">
...
<ng-container matColumnDef="CONF">
<th mat-header-cell *matHeaderCellDef class="centered-cell two-row-header">
<div class="header-content">APLICA CONFIGURACION</div>
<div class="checkbox-container">
<mat-checkbox (change)="toggleSelectAll($event)"
[checked]="isAllSelected()"
[indeterminate]="isSomeSelected()"></mat-checkbox>
<span>Todos</span>
</div>
</th>
<td mat-cell *matCellDef="let element; let i = index" class="centered-cell">
<mat-checkbox formControlName="aplicaConf"
(change)="cargaPorcentaje($event, i)"
[(ngModel)]="element.CONF">
</mat-checkbox>
</td>
</ng-container>

<ng-container matColumnDef="PORCENTAJE">
<th mat-header-cell *matHeaderCellDef class="centered-cell">Nuevo Porcentaje </th>
<td mat-cell *matCellDef="let element let i = index" class="centered-cell">
<input type="text" matInput formControlName="porcentaje" [(ngModel)]="element.PORCENTAJE">
</td>
</ng-container>


at component:

isAllSelected() {
return this.dataComision.data.length > 0 && this.dataComision.data.every(item => item.CONF);
}

isSomeSelected() {
return this.dataComision.data.some(item => item.CONF) && !this.isAllSelected();
}

toggleSelectAll(event: any) {
const porcentajeAgente = this.comisionFormGroup.get('porcentajeAgente')?.value || '0';


this.dataComision.data = this.dataComision.data.map(item => ({
...item,
CONF: event.checked,
PORCENTAJE_ORIGINAL: event.checked ? item.PORCENTAJE_ORIGINAL || porcentajeAgente : item.PORCENTAJE, // Guardar original
PORCENTAJE: event.checked ? porcentajeAgente : '0' // Asignar nuevo valor o resetear a 0
}));

}

onTab(event: KeyboardEvent){
if (event.key === 'Tab') {
const porcentajeAgente = this.comisionFormGroup.get('porcentajeAgente')?.value || '0';
const newData = this.dataComision.data.map(item => ({
...item,
CONF: true,
PORCENTAJE: porcentajeAgente
}));
this.dataComision.data = newData;
}

}

cargaPorcentaje(event: MatCheckboxChange, index: number) {
const porcentajeAgente = this.comisionFormGroup.get('porcentajeAgente')?.value || '0';

if (event.checked) {
this.dataComision.data[index].PORCENTAJE = this.dataComision.data[index].PORCENTAJE_ORIGINAL || porcentajeAgente;
} else {
this.dataComision.data[index].PORCENTAJE_ORIGINAL = this.dataComision.data[index].PORCENTAJE;
this.dataComision.data[index].PORCENTAJE = '0';
}


}


How fix the code, for the best results, for work. Thanks

try this:

// Clonar la data asegurando el tipo correcto
const newData = JSON.parse(JSON.stringify(this.dataComision.data));

newData.forEach((item: { CONF: boolean; PORCENTAJE_ORIGINAL: string; PORCENTAJE: string; }) => {
//item.CONF = event.checked;
item.PORCENTAJE_ORIGINAL = event.checked ? item.PORCENTAJE_ORIGINAL || porcentajeAgente : item.PORCENTAJE;
item.PORCENTAJE = event.checked ? porcentajeAgente : '0';
});

// Forzar actualización de Angular
this.dataComision.data = [];
this.dataComision = new MatTableDataSource(newData);
this.dataComision._updateChangeSubscription();


but not works

Continue reading...