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 = thisisionFormGroup.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 = thisisionFormGroup.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 = thisisionFormGroup.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