3

Tengo una tabla con 3 columnas. En la primera columna se muestra la descripción de un objeto "Table1" y en la segunda se muestra la descripción de otro objeto "Table2". La tercera columna tiene checkbox que al marcarlo van formando un array de objetos que contienen el Id de la "Table1" y el Id de la "Table2" según la fila que se vaya marcando.

Tabla principal

tablaprincipal

Quiero aplicar un rowspan en las descripciones de la primera columna para evitar que se repitan. Pero la estructura de la información me complica:

 this.info = [
      {
        Id: 1,
        IdTable1: 1,
        IdTable2: 1,
        Table1: {
          IdTable1: 1,
          Description: 'Description A'
        },
        Table2: {
          IdTable2: 1,
          Option: 'Option 1'
        }
      },
      {
        Id: 2,
        IdTable1: 1,
        IdTable2: 2,
        Table1: {
          IdTable1: 1,
          Description: 'Description A'
        },
        Table2: {
          IdTable2: 2,
          Option: 'Option 3'
        }
      },
      {
        Id: 3,
        IdTable1: 2,
        IdTable2: 6,
        Table1: {
          IdTable1: 2,
          Description: 'Description B'
        },
        Table2: {
          IdTable2: 6,
          Option: 'Option 2'
        }
      },
      {
        Id: 4,
        IdTable1: 4,
        IdTable2: 1,
        Table1: {
          IdTable1: 4,
          Description: 'Description C'
        },
        Table2: {
          IdTable2: 1,
          Option: 'Option 1'
        }
      },
      {
        Id: 5,
        IdTable1: 4,
        IdTable2: 6,
        Table1: {
          IdTable1: 4,
          Description: 'Description C'
        },
        Table2: {
          IdTable2: 6,
          Option: 'Option 2'
        }
      },
      {
        Id: 6,
        IdTable1: 5,
        IdTable2: 2,
        Table1: {
          IdTable1: 5,
          Description: 'Description D'
        },
        Table2: {
          IdTable2: 2,
          Option: 'Option 3'
        }
      }
    ];

Buscando algo similar vi algunos ejemplos que entre ellos siguen una ruta similar, aplicando el rowspan con la longitud de un array, junto a la directiva *ngFor para cada columna y usando otra estructura de datos. Si siguiera esa ruta tendría que cambiar la estructura de la información que me llega, y tampoco sabría como hacerlo para que quede de la siguiente forma y poder seguir el ejemplo:

this.info2 = [
      {
        Id: 1,
        IdTable1: 1,
        Description: 'Description A',
        Options: [
          {
            IdTable2: 1,
            Option: 'Option 1'
          },
          {
            IdTable2: 2,
            Option: 'Option 3'
          }
        ]
      },
      {
        Id: 2,
        IdTable1: 2,
        Description: 'Description B',
        Options: [
          {
            IdTable2: 6,
            Option: 'Option 2'
          }
        ]
      },
      {
        Id: 3,
        IdTable1: 4,
        Description: 'Description C',
        Options: [
          {
            IdTable2: 1,
            Option: 'Option 1'
          },
          {
            IdTable2: 6,
            Option: 'Option 2'
          }
        ]
      },
      {
        Id: 4,
        IdTable1: 5,
        Description: 'Description B',
        Options: [
          {
            IdTable2: 6,
            Option: 'Option 2'
          }
        ]
      }
    ];

Suponiendo que se haya escogido:

Description A --> Option 1

Description C --> Option 2

Tabla del ejemplo

options

Si de alguna manera se cambia la estructura original, ya no funciona correctamente el checkbox. Ya que el objeto en este caso con la "Description A" se crea como si hubiera marcado la "Option 1" y "Option 3", y lo mismo pasa con la "Description C" debido a que las opciones están dentro del mismo array.

table2

En cambio usando la estructura principal, puedo "acomodar" el objeto que se marca, tomando los datos que interesan enviar, el id de "Table1" y "Table2" según la fila seleccionada.

princ

Entonces lo que hice fue crear un método en donde envío el Id de "Table1" y el índice. El id para sacar las veces que se repite cada descripción de la primera columna usando map y filter, con la intención de retornar las n veces que se aplicará el rowspan. Con respecto al índice se declaró dos arrays, uno que tendría los índices que se generan al formar las filas "arrayInit" y el otro array "arrayUnique" para guardar lo que no se repita de ese mismo array (debido al bucle usando *ngFor da ese comportamiento). Quedando los índices sin repetirse de esta forma [0, 2, 3, 5].

onCount(id: any, index: any): Number {
  this.arrayInit.push(index);
  this.arrayUnique = [...new Set(this.arrayInit)];
  let dataRepeat = this.info.map((x: any) => x.IdTable1 === id);
  let contador = dataRepeat.filter((x: any) => x).length;
  return contador;
}

Hasta ahí la parte del rowspan estaría "solucionado" pero ahora la cuestión es el índice, ya que debo indicar en que índice debo aplicar las n veces el rowspan. La idea de mandar los índices anteriormente era para tratar de solucionar esa parte, con un método que retorna el índice de manera individual por así decirlo, usando el método find al array [0, 2, 3, 5] "arrayUnique" con el propósito de que cuando se envíe el índice encuentre la coincidencia dentro del array y me retorne ese índice, pero no me funciona.

getIndex(i: any) {
    return this.arrayUnique.find(x => x == i);
}

Al agregar un *ngIf para aplicar el rowspan solo en los indices que corresponde funciona. Esta parte: *ngIf="i==0 || i==2 || i==3 || i==5" es la que no comprendo como hacerla de manera dinámica ya que estoy ingresando manualmente el índice.

<tr *ngFor="let data of info; let i=index">
   <td [attr.rowspan]="onCount(data.IdTable1,i)" *ngIf="i==0 || i==2 || i==3 || i==5">
      {{data.Table1.Description}}
   </td>
   <td>{{data.Table2.Option}}</td>
   <td>
     <mat-checkbox (change)="onChange($event,data)"></mat-checkbox>
   </td>
</tr>

Ahora si cambio el método getIndex() de esta manera

getIndex(i: any) {
    let b = [0, 2, 3, 5];
    let n = b.find(x => x == i);
    if (n >= 0) {
      return n;
    }
 }

Y en el html

<td [attr.rowspan]="onCount(data.IdTable1,i)" *ngIf="i==getIndex(i)">
      {{data.Table1.Description}}
 </td>

Funciona pero no estoy usando el array que en teoría almacena los índices [0, 2, 3, 5] "arrayUnique" al generar la tabla, si no que lo defino en la letra "b". Me estoy liando no sé si quizá tenga que ver algo con métodos asíncronos. La demo tengo en stackblitz Demo

.HTML

<table style="margin-top:30px; margin-bottom:30px;">
  <tr *ngFor="let data of info; let i=index">
    <td [attr.rowspan]="onCount(data.IdTable1,i)" *ngIf="i==0 || i==2 || i==3 || i==5">
      {{data.Table1.Description}}
    </td>
    <td>{{data.Table2.Option}}</td>
    <td>
      <mat-checkbox (change)="onChange($event,data)"></mat-checkbox>
    </td>
  </tr>
</table>
Data:
<pre>{{ demoFormGroup.get('info')?.value | json }}</pre>


<table style="margin-top:30px; margin-bottom:30px;">
  <ng-container *ngFor="let data of info2">
    <tr>
      <td [attr.rowspan]="data.Options.length + 1">{{data.Description}}</td>
    </tr>
    <tr *ngFor="let option of data.Options;">
      <td>{{option.Option}}</td>
      <td>
        <mat-checkbox (change)="onChange2($event,data)"></mat-checkbox>
      </td>
    </tr>
  </ng-container>
</table>

Data:
<pre>{{ demoFormGroup2.get('info2')?.value | json }}</pre>

<button type="button" (click)="probar()">probar</button>

.TS

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  demoFormGroup: FormGroup;
  demoFormGroup2: FormGroup;
  info: any;
  info2: any;

  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    //PRINCIPAL STRUCTURE
    this.demoFormGroup = this.fb.group({
      info: this.fb.array([])
    });
    this.info = [
      {
        Id: 1,
        IdTable1: 1,
        IdTable2: 1,
        Table1: {
          IdTable1: 1,
          Description: 'Description A'
        },
        Table2: {
          IdTable2: 1,
          Option: 'Option 1'
        }
      },
      {
        Id: 2,
        IdTable1: 1,
        IdTable2: 2,
        Table1: {
          IdTable1: 1,
          Description: 'Description A'
        },
        Table2: {
          IdTable2: 2,
          Option: 'Option 3'
        }
      },
      {
        Id: 3,
        IdTable1: 2,
        IdTable2: 6,
        Table1: {
          IdTable1: 2,
          Description: 'Description B'
        },
        Table2: {
          IdTable2: 6,
          Option: 'Option 2'
        }
      },
      {
        Id: 4,
        IdTable1: 4,
        IdTable2: 1,
        Table1: {
          IdTable1: 4,
          Description: 'Description C'
        },
        Table2: {
          IdTable2: 1,
          Option: 'Option 1'
        }
      },
      {
        Id: 5,
        IdTable1: 4,
        IdTable2: 6,
        Table1: {
          IdTable1: 4,
          Description: 'Description C'
        },
        Table2: {
          IdTable2: 6,
          Option: 'Option 2'
        }
      },
      {
        Id: 6,
        IdTable1: 5,
        IdTable2: 2,
        Table1: {
          IdTable1: 5,
          Description: 'Description D'
        },
        Table2: {
          IdTable2: 2,
          Option: 'Option 3'
        }
      }
    ];
    //ANOTHER STRUCTURE
    this.demoFormGroup2 = this.fb.group({
      info2: this.fb.array([])
    });
    this.info2 = [
      {
        Id: 1,
        IdTable1: 1,
        Description: 'Description A',
        Options: [
          {
            IdTable2: 1,
            Option: 'Option 1'
          },
          {
            IdTable2: 2,
            Option: 'Option 3'
          }
        ]
      },
      {
        Id: 2,
        IdTable1: 2,
        Description: 'Description B',
        Options: [
          {
            IdTable2: 6,
            Option: 'Option 2'
          }
        ]
      },
      {
        Id: 3,
        IdTable1: 4,
        Description: 'Description C',
        Options: [
          {
            IdTable2: 1,
            Option: 'Option 1'
          },
          {
            IdTable2: 6,
            Option: 'Option 2'
          }
        ]
      },
      {
        Id: 4,
        IdTable1: 5,
        Description: 'Description B',
        Options: [
          {
            IdTable2: 6,
            Option: 'Option 2'
          }
        ]
      }
    ];
  }

  get arrayData(): FormArray {
    return <FormArray>this.demoFormGroup.controls.info;
  }
  onChange(event: any, option: any) {
    let newObject = {
      IdTable1: option.IdTable1,
      IdTable2: option.IdTable2
    };
    if (event.checked) {
      this.arrayData.push(new FormControl(newObject));
    } else {
      this.arrayData.removeAt(
        this.arrayData.value.findIndex((x: any) => x.Id === option.Id)
      );
    }
  }

  arrayInit: any[] = [];
  arrayUnique: any[] = [];

  onCount(id: any, index: any): Number {
    this.arrayInit.push(index);
    this.arrayUnique = [...new Set(this.arrayInit)];
    let dataRepeat = this.info.map((x: any) => x.IdTable1 === id);
    let contador = dataRepeat.filter((x: any) => x).length;
    return contador;
  }

  getIndex(i: any) {
    let b = [0, 2, 3, 5];
    let n = b.find(x => x == i);
    if (n >= 0) {
      return n;
    }
  }

  get arrayData2(): FormArray {
    return <FormArray>this.demoFormGroup2.controls.info2;
  }
  onChange2(event: any, option: any) {
    if (event.checked) {
      this.arrayData2.push(new FormControl(option));
    } else {
      this.arrayData2.removeAt(
        this.arrayData2.value.findIndex((x: any) => x.Id === option.Id)
      );
    }
  }

  probar() {
    console.log(this.arrayUnique);
    console.log(this.arrayInit);
    console.log(this.getIndex(3));
  }
}

1 respuesta 1

3
+100

Agrego código con comentarios adentro. Lo primero sería llamar a la función formatearDatos para que tome el arreglo original en info y lo convierta a una estructura que facilite crear la tabla, el nuevo arreglo se aguarda en descripcionesYOpciones.

En el componente:

  descripcionesYOpciones = []
  formatearDatos() {
    // Obtener las distintas descripciones de Tabla1
    let descripcionesTabla1 = [...new Set(this.info.map(i => i.Table1.Description))]

    // Crear un nuevo arreglo que agrupa la descripción de Table1 con
    // sus respectivas opciones
    descripcionesTabla1.forEach(d => {
      // filtrar los objetos donde la descripción de Table1 coincide con la 
      // descripción actual
      let objectosDeTabla1 = this.info.filter(i => i.Table1.Description == d)
      // crear nuevos objetos agrupados
      this.descripcionesYOpciones.push({
        IdTable1: objectosDeTabla1[0].IdTable1,
        Description: d,
        Options: objectosDeTabla1.map(o => (
          {
            ...o.Table2,
            // se agrega aquí también el IdTable1 para que sea más fácil recuperarlo luego
            IdTable1: objectosDeTabla1[0].IdTable1
          }
        ))
      })
    })
    // mostrar el resultado
    console.log(this.descripcionesYOpciones);
  }

  mostrarSeleccionados() {
    let opcionesSeleccionadas = this.descripcionesYOpciones
      .map(d => d.Options) // crear nuevo arreglo que contiene solo los arreglos de opciones de cada objeto
      // como el resultado es un arreglo de arreglos [[], [], []]
      // se reduce para dejar una arreglo de objectos plano [{},{},{}]
      .reduce((p: any[], c: any[]) => {
        p.push(...c)
        return p
      }, []) 
      // con el nuevo arreglo obtenido se filtran los objetos que tenga su propiedad selected en true
      .filter(o => o.Selected)
    console.log(opcionesSeleccionadas)
  }

En la vista:

<table border="1">
  <!-- Iteración anidada para crear filas para todos las opciones -->
  <ng-container *ngFor="let d of descripcionesYOpciones"> 
    <ng-container *ngFor="let o of d.Options; let i = index">
      <tr>
        <!-- El primer td solo aparece la primera vez y su rowspan es igual a la cantidad de opciones -->
        <td *ngIf="i == 0" [attr.rowspan]="d.Options.length">{{d.Description}} {{d.Options.length}}</td>
        <td>{{o.Option}}</td>
        <td>
          <!-- el checkbox se enlace con la propiedad Selected del objeto (Se creará automáticamente al seleccionarlo) -->
          <input type="checkbox" [(ngModel)]="o.Selected">
        </td>
      </tr>
    </ng-container>
  </ng-container>
</table>

<button (click)="mostrarSeleccionados()">Mostrar seleccionados</button>

Demo

1
  • Claro como el agua :D el 2 ago. 2021 a las 16:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.