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
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
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.
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.
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));
}
}